Combobox

A combobox allows users to select a value from a list of predefined options.

import * as UI from "@iyk/ui"

export default () => (
  <UI.Field name="name">
    <UI.Label>Name</UI.Label>

    <UI.Combobox.Root defaultValue="squirtle" defaultLabel="Squirtle">
      <UI.Combobox.Button />
      <UI.Combobox.Dialog>
        <UI.Combobox.Filter placeholder="Search..." />
        <UI.Combobox.Listbox>
          <UI.Combobox.Option value="bulbasaur">Bulbasaur</UI.Combobox.Option>
          <UI.Combobox.Option value="charizard">Charizard</UI.Combobox.Option>
          <UI.Combobox.Option value="squirtle">Squirtle</UI.Combobox.Option>
        </UI.Combobox.Listbox>
      </UI.Combobox.Dialog>
    </UI.Combobox.Root>

    <UI.Validity />
  </UI.Field>
)