ComboBox

Combobox implementation. It's also known as editable ComboBox, in the reference implementation.

See also:

• Dropdown

Live example

Result

Loading...

Live Editor

<div style={{ display: "flex", flexDirection: "column", alignItems: "start", gap: "1rem", flexWrap: "wrap", }} > <ComboBox label="Script:" defaultSelectedKey="build"> <Item key="start">start</Item> <Item key="build">build</Item> <Item key="test">test</Item> <Item key="deploy">deploy</Item> </ComboBox> <ComboBox label="Validated:" validationState="error" defaultSelectedKey="Info" > <Item key="start">start</Item> <Item key="build">build</Item> <Item key="test">test</Item> <Item key="deploy">deploy</Item> </ComboBox> <ComboBox label="label placed above:" labelPlacement="above" defaultSelectedKey="option2" > <Item key="option1">Option 1</Item> <Item key="option2">Option 2</Item> <Item key="option3">Option 3</Item> <Item key="option4">Option 4</Item> </ComboBox> </div>

<div
  style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "start",
    gap: "1rem",
    flexWrap: "wrap",
  }}
>
  <ComboBox label="Script:" defaultSelectedKey="build">
    <Item key="start">start</Item>
    <Item key="build">build</Item>
    <Item key="test">test</Item>
    <Item key="deploy">deploy</Item>
  </ComboBox>

  <ComboBox
    label="Validated:"
    validationState="error"
    defaultSelectedKey="Info"
  >
    <Item key="start">start</Item>
    <Item key="build">build</Item>
    <Item key="test">test</Item>
    <Item key="deploy">deploy</Item>
  </ComboBox>

  <ComboBox
    label="label placed above:"
    labelPlacement="above"
    defaultSelectedKey="option2"
  >
    <Item key="option1">Option 1</Item>
    <Item key="option2">Option 2</Item>
    <Item key="option3">Option 3</Item>
    <Item key="option4">Option 4</Item>
  </ComboBox>
</div>

Filtering

By default, items are not filtered based the input value. Filtering options is possible by controlling value and items props:

Result

Loading...

Live Editor

const items = [ { name: "start" }, { name: "build" }, { name: "test" }, { name: "deploy" }, ]; function WithFiltering() { const [value, setValue] = React.useState(""); const filteredItems = React.useMemo( () => items.filter((item) => item.name.toLowerCase().startsWith(value.toLowerCase()) ), [value] ); return ( <ComboBox items={filteredItems} menuTrigger="input" value={value} onValueChange={setValue} > {({ name }) => <Item key={name}>{name}</Item>} </ComboBox> ); } render(<WithFiltering />);

const items = [
  { name: "start" },
  { name: "build" },
  { name: "test" },
  { name: "deploy" },
];

function WithFiltering() {
  const [value, setValue] = React.useState("");
  const filteredItems = React.useMemo(
    () =>
      items.filter((item) =>
        item.name.toLowerCase().startsWith(value.toLowerCase())
      ),
    [value]
  );
  return (
    <ComboBox
      items={filteredItems}
      menuTrigger="input"
      value={value}
      onValueChange={setValue}
    >
      {({ name }) => <Item key={name}>{name}</Item>}
    </ComboBox>
  );
}

render(<WithFiltering />);

tip

When filtering options based on input value, use menuTrigger="input" to have the dropdown open as the input is typed in.

Label Alignment

Use LabeledControlsAlignmentProvider to align combobox with other labeled controls, according to the design guidelines.

Result

Loading...

Live Editor

<LabeledControlsAlignmentProvider> <div style={{ display: "flex", flexDirection: "column", gap: "1rem", width: 400, }} > <InputField label="Host name:" /> <ComboBox label="Port number:"> <Item key="80">80</Item> </ComboBox> </div> </LabeledControlsAlignmentProvider>

<LabeledControlsAlignmentProvider>
  <div
    style={{
      display: "flex",
      flexDirection: "column",
      gap: "1rem",
      width: 400,
    }}
  >
    <InputField label="Host name:" />
    <ComboBox label="Port number:">
      <Item key="80">80</Item>
    </ComboBox>
  </div>
</LabeledControlsAlignmentProvider>

Known differences

Combobox has the same differences with the reference implementation as Dropdown has.