Skip to main content

ComboBox

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

See also:

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>

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 />);
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>

Known differences​

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