Combobox

Source code

import { Combobox } from "rfui-package";

#Basic

<Combobox
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
  ]}
/>

#Using with HTML forms

If you add the name prop, a hidden input element will be rendered and kept in sync with theCombobox state. See Headless UI's docs here.

<Combobox
  name="name-example"
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
  ]}
/>

#Empty initial value

If you want an empty initial value use something like this as the first option in the options array:

{
  label: "",
  value: "",
}

<Combobox
  options={[
    {
      label: "",
      value: "",
    },
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
  ]}
/>

#Uncontrolled

If you don't pass onChange this component will be uncontrolled. If you're taking the uncontrolled approach you can use the defaultValue prop to set the initial value.

<Combobox defaultValue={options[1]} options={options} />

#Controlled

Pass value and onChange to make this a controlled component.

<Combobox
  value={controlledValue}
  onChange={(newValue) => {
    setControlledValue(newValue as { label: string; value: string });
  }}
  options={options}
/>

#Size

Set size to either "sm", "md" or "lg". Defaults to "md".

<Stack className="w-fit gap-5">
  <Combobox
    size="sm"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
  <Combobox
    size="md"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
  <Combobox
    size="lg"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
</Stack>

#Rounded

Set rounded to either "square", "sm", "lg", or "full". Defaults to the value of the CSS variable --default-roundedness. See "Default roundedness".

<Stack className="w-fit gap-5">
  <Combobox
    rounded="square"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
  <Combobox
    rounded="sm"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
  <Combobox
    rounded="lg"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
  <Combobox
    rounded="full"
    options={[
      {
        label: "Foo",
        value: "foo",
      },
      {
        label: "Bar",
        value: "bar",
      },
      {
        label: "Baz",
        value: "baz",
      },
    ]}
  />
</Stack>

#Disabled

Set disabled to true.

<Combobox
  disabled
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
  ]}
/>

#Disabled option

Set disabled to true for a given option .

<Combobox
  options={[
    {
      label: "Foo",
      value: "foo",
      disabled: false,
    },
    {
      label: "Bar",
      value: "bar",
      disabled: true,
    },
    {
      label: "Baz",
      value: "baz",
      disabled: false,
    },
  ]}
/>

#Invalid

Set invalid totrue.

<Combobox
  invalid
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
  ]}
/>

#Uncontrolled multiselect

Set multiple to true. If using defaultValue pass an array of options.

Foo

<Combobox
  invalid
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
    {
      label:
        "Some long text here causing the display to show 'n item(s) selected'",
      value: "long",
    },
  ]}
/>

#Controlled multiselect

Set multiple to true and pass an array to value.

Bar

<Combobox
  multiple
  value={controlledMultiselectValues}
  onChange={(newValues) => {
    setControlledMultiselectValues(
      newValues as { label: string; value: string }[]
    );
  }}
  options={[
    {
      label: "Foo",
      value: "foo",
    },
    {
      label: "Bar",
      value: "bar",
    },
    {
      label: "Baz",
      value: "baz",
    },
    {
      label:
        "Some long text here causing the display to show 'n item(s) selected'",
      value: "long",
    },
  ]}
/>

#Props

Prop	Required	Default	Type and notes
`options`		-	`Option[]`
`name`	-	-	`string` Use if you want to submit as an HTML form. See Headless UI's docs.
`size`	-	`"md"`	`"sm" \| "md" \| "lg"`
`rounded`	-	-	`"square" \| "sm" \| "lg" \| "full"` Defaults to the value of the CSS variable `--default-roundedness`. See "Default roundedness".
`disabled`	-	`false`	`boolean`
`invalid`	-	`false`	`boolean`
`defaultValue`	-	-	`Option \| Option[]`
`value`	-	-	`Option \| Option[]`
`onChange`	-	-	`(newValue: Option \| Option[]) => void`
`multiple`	-	`false`	`boolean`
`inputClassName`	-	-	`string` This will be passed to Headless UI's `ComboboxInput` component.
`optionsClassName`	-	-	`string` This will be passed to Headless UI's `ComboboxOptions` component.
`optionClassName`	-	-	`string` This will be passed to Headless UI's `ComboboxOption` component.