ComboBox

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Example#

import {Button, ComboBox, Input, Item, Label, ListBox, Popover} from 'react-aria-components';

<ComboBox>
  <Label>Favorite Animal</Label>
  <div>
    <Input />
    <Button>▼</Button>
  </div>
  <Popover>
    <ListBox>
      <Item>Aardvark</Item>
      <Item>Cat</Item>
      <Item>Dog</Item>
      <Item>Kangaroo</Item>
      <Item>Panda</Item>
      <Item>Snake</Item>
    </ListBox>
  </Popover>
</ComboBox>

import {
  Button,
  ComboBox,
  Input,
  Item,
  Label,
  ListBox,
  Popover
} from 'react-aria-components';

<ComboBox>
  <Label>Favorite Animal</Label>
  <div>
    <Input />
    <Button>▼</Button>
  </div>
  <Popover>
    <ListBox>
      <Item>Aardvark</Item>
      <Item>Cat</Item>
      <Item>Dog</Item>
      <Item>Kangaroo</Item>
      <Item>Panda</Item>
      <Item>Snake</Item>
    </ListBox>
  </Popover>
</ComboBox>

import {
  Button,
  ComboBox,
  Input,
  Item,
  Label,
  ListBox,
  Popover
} from 'react-aria-components';

<ComboBox>
  <Label>
    Favorite Animal
  </Label>
  <div>
    <Input />
    <Button>▼</Button>
  </div>
  <Popover>
    <ListBox>
      <Item>
        Aardvark
      </Item>
      <Item>Cat</Item>
      <Item>Dog</Item>
      <Item>
        Kangaroo
      </Item>
      <Item>
        Panda
      </Item>
      <Item>
        Snake
      </Item>
    </ListBox>
  </Popover>
</ComboBox>

.react-aria-ComboBox {
  --border-color: var(--spectrum-alias-border-color);
  --border-color-disabled: var(--spectrum-alias-border-color-disabled);
  --button-background: slateblue;

  .react-aria-Input {
    margin: 0;
    font-size: 1.072rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.286rem 2rem 0.286rem 0.571rem;
    vertical-align: middle;

    &[data-invalid] {
      border-color: var(--spectrum-global-color-red-600);
    }

    &[data-focused] {
      outline: none;
      border-color: slateblue;
      box-shadow: 0 0 0 1px slateblue;
    }

    &[data-disabled] {
      border-color: var(--border-color-disabled);
    }
  }

  .react-aria-Button {
    background: slateblue;
    color: white;
    border-radius: 4px;
    border: none;
    appearance: none;
    margin-left: -1.714rem;
    width: 1.429rem;
    height: 1.429rem;
    padding: 0;
    vertical-align: middle;
    font-size: 0.857rem;
    outline: none;

    &[data-disabled] {
      background: var(--border-color-disabled);
    }
  }

  [slot=description] {
    font-size: 12px;
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--spectrum-global-color-red-600);
  }
}

.react-aria-ListBox {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);

  max-height: inherit;
  box-sizing: border-box;
  overflow: auto;
  padding: 2px;
  outline: none;

  .react-aria-Section:not(:first-child) {
    margin-top: 12px;
  }

  .react-aria-Header {
    font-size: 1.143rem;
    font-weight: bold;
    padding: 0 0.571rem 0 1.571rem;
  }

  .react-aria-Item {
    margin: 2px;
    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
    border-radius: 6px;
    outline: none;
    cursor: default;
    color: var(--text-color);
    font-size: 1.072rem;
    position: relative;
    display: flex;
    flex-direction: column;

    &[data-selected] {
      font-weight: 600;

      &::before {
        content: '✓';
        content: '✓' / '';
        alt: ' ';
        position: absolute;
        top: 4px;
        left: 4px;
      }
    }

    &[data-focused],
    &[data-pressed] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    [slot=label] {
      font-weight: bold;
    }

    [slot=description] {
      font-size: small;
    }
  }
}

.react-aria-Popover {
  --background-color: var(--page-background);
  --border-color: var(--spectrum-global-color-gray-400);

  border: 1px solid var(--border-color);
  width: var(--trigger-width);
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
  border-radius: 6px;
  background: var(--background-color);
  outline: none;
}

@media (forced-colors: active) {
  .react-aria-ComboBox {
    --border-color: ButtonBorder;
    --border-color-disabled: GrayText;

    .react-aria-Button {
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonBorder;
      &[data-disabled] {
        background: transparent;
      }
    }
  }

  .react-aria-ListBox {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --border-color: ButtonBorder;
    --background-color: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
  }
}

.react-aria-ComboBox {
  --border-color: var(--spectrum-alias-border-color);
  --border-color-disabled: var(--spectrum-alias-border-color-disabled);
  --button-background: slateblue;

  .react-aria-Input {
    margin: 0;
    font-size: 1.072rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.286rem 2rem 0.286rem 0.571rem;
    vertical-align: middle;

    &[data-invalid] {
      border-color: var(--spectrum-global-color-red-600);
    }

    &[data-focused] {
      outline: none;
      border-color: slateblue;
      box-shadow: 0 0 0 1px slateblue;
    }

    &[data-disabled] {
      border-color: var(--border-color-disabled);
    }
  }

  .react-aria-Button {
    background: slateblue;
    color: white;
    border-radius: 4px;
    border: none;
    appearance: none;
    margin-left: -1.714rem;
    width: 1.429rem;
    height: 1.429rem;
    padding: 0;
    vertical-align: middle;
    font-size: 0.857rem;
    outline: none;

    &[data-disabled] {
      background: var(--border-color-disabled);
    }
  }

  [slot=description] {
    font-size: 12px;
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--spectrum-global-color-red-600);
  }
}

.react-aria-ListBox {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);

  max-height: inherit;
  box-sizing: border-box;
  overflow: auto;
  padding: 2px;
  outline: none;

  .react-aria-Section:not(:first-child) {
    margin-top: 12px;
  }

  .react-aria-Header {
    font-size: 1.143rem;
    font-weight: bold;
    padding: 0 0.571rem 0 1.571rem;
  }

  .react-aria-Item {
    margin: 2px;
    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
    border-radius: 6px;
    outline: none;
    cursor: default;
    color: var(--text-color);
    font-size: 1.072rem;
    position: relative;
    display: flex;
    flex-direction: column;

    &[data-selected] {
      font-weight: 600;

      &::before {
        content: '✓';
        content: '✓' / '';
        alt: ' ';
        position: absolute;
        top: 4px;
        left: 4px;
      }
    }

    &[data-focused],
    &[data-pressed] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    [slot=label] {
      font-weight: bold;
    }

    [slot=description] {
      font-size: small;
    }
  }
}

.react-aria-Popover {
  --background-color: var(--page-background);
  --border-color: var(--spectrum-global-color-gray-400);

  border: 1px solid var(--border-color);
  width: var(--trigger-width);
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
  border-radius: 6px;
  background: var(--background-color);
  outline: none;
}

@media (forced-colors: active) {
  .react-aria-ComboBox {
    --border-color: ButtonBorder;
    --border-color-disabled: GrayText;

    .react-aria-Button {
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonBorder;
      &[data-disabled] {
        background: transparent;
      }
    }
  }

  .react-aria-ListBox {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --border-color: ButtonBorder;
    --background-color: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
  }
}

.react-aria-ComboBox {
  --border-color: var(--spectrum-alias-border-color);
  --border-color-disabled: var(--spectrum-alias-border-color-disabled);
  --button-background: slateblue;

  .react-aria-Input {
    margin: 0;
    font-size: 1.072rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.286rem 2rem 0.286rem 0.571rem;
    vertical-align: middle;

    &[data-invalid] {
      border-color: var(--spectrum-global-color-red-600);
    }

    &[data-focused] {
      outline: none;
      border-color: slateblue;
      box-shadow: 0 0 0 1px slateblue;
    }

    &[data-disabled] {
      border-color: var(--border-color-disabled);
    }
  }

  .react-aria-Button {
    background: slateblue;
    color: white;
    border-radius: 4px;
    border: none;
    appearance: none;
    margin-left: -1.714rem;
    width: 1.429rem;
    height: 1.429rem;
    padding: 0;
    vertical-align: middle;
    font-size: 0.857rem;
    outline: none;

    &[data-disabled] {
      background: var(--border-color-disabled);
    }
  }

  [slot=description] {
    font-size: 12px;
  }

  [slot=errorMessage] {
    font-size: 12px;
    color: var(--spectrum-global-color-red-600);
  }
}

.react-aria-ListBox {
  --highlight-background: slateblue;
  --highlight-foreground: white;
  --text-color: var(--spectrum-alias-text-color);
  --text-color-disabled: var(--spectrum-alias-text-color-disabled);

  max-height: inherit;
  box-sizing: border-box;
  overflow: auto;
  padding: 2px;
  outline: none;

  .react-aria-Section:not(:first-child) {
    margin-top: 12px;
  }

  .react-aria-Header {
    font-size: 1.143rem;
    font-weight: bold;
    padding: 0 0.571rem 0 1.571rem;
  }

  .react-aria-Item {
    margin: 2px;
    padding: 0.286rem 0.571rem 0.286rem 1.571rem;
    border-radius: 6px;
    outline: none;
    cursor: default;
    color: var(--text-color);
    font-size: 1.072rem;
    position: relative;
    display: flex;
    flex-direction: column;

    &[data-selected] {
      font-weight: 600;

      &::before {
        content: '✓';
        content: '✓' / '';
        alt: ' ';
        position: absolute;
        top: 4px;
        left: 4px;
      }
    }

    &[data-focused],
    &[data-pressed] {
      background: var(--highlight-background);
      color: var(--highlight-foreground);
    }

    &[data-disabled] {
      color: var(--text-color-disabled);
    }

    [slot=label] {
      font-weight: bold;
    }

    [slot=description] {
      font-size: small;
    }
  }
}

.react-aria-Popover {
  --background-color: var(--page-background);
  --border-color: var(--spectrum-global-color-gray-400);

  border: 1px solid var(--border-color);
  width: var(--trigger-width);
  box-sizing: border-box;
  box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
  border-radius: 6px;
  background: var(--background-color);
  outline: none;
}

@media (forced-colors: active) {
  .react-aria-ComboBox {
    --border-color: ButtonBorder;
    --border-color-disabled: GrayText;

    .react-aria-Button {
      background: ButtonFace;
      color: ButtonText;
      border: 1px solid ButtonBorder;
      &[data-disabled] {
        background: transparent;
      }
    }
  }

  .react-aria-ListBox {
    forced-color-adjust: none;

    --highlight-background: Highlight;
    --highlight-foreground: HighlightText;
    --border-color: ButtonBorder;
    --background-color: ButtonFace;
    --text-color: ButtonText;
    --text-color-disabled: GrayText;
  }
}

Features#

A combo box can be built using the <datalist> HTML element, but this is very limited in functionality and difficult to style. ComboBox helps achieve accessible combo box and autocomplete components that can be styled as needed.

• Flexible – Support for selecting pre-defined values, custom values, controlled and uncontrolled state, custom filter functions, async loading, disabled items, validation, and multiple menu trigger options.
• Keyboard navigation – ComboBox can be opened and navigated using the arrow keys, along with page up/down, home/end, etc. The list of options is filtered while typing into the input, and items can be selected with the enter key.
• Accessible – Follows the ARIA combobox pattern, with support for items and sections, and slots for label and description elements within each item. Custom localized announcements are included for option focusing, filtering, and selection using an ARIA live region to ensure announcements are clear and consistent.
• Styleable – Items include builtin states for styling, such as hover, press, focus, selected, and disabled.

Read our blog post for more details about the interactions and accessibility features implemented by ComboBox.

Anatomy#

A combo box consists of a label, an input which displays the current value, a listbox displayed in a popover, and an optional button used to toggle the popover open state. Users can type within the input to filter the available options within the list box. The list box popover may be opened by a variety of input field interactions specified by the menuTrigger prop provided to ComboBox, or by clicking or touching the button.

ComboBox also supports optional description and error message elements, which can be used to provide more context about the field, and any validation messages. These are linked with the input via the aria-describedby attribute.

import {Button, ComboBox, Header, Input, Item, Label, ListBox, Popover, Section, Text} from 'react-aria-components';

<ComboBox>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <Text slot="errorMessage" />
  <Popover>
    <ListBox>
      <Item>
        <Text slot="label" />
        <Text slot="description" />
      </Item>
      <Section>
        <Header />
        <Item />
      </Section>
    </ListBox>
  </Popover>
</ComboBox>

import {
  Button,
  ComboBox,
  Header,
  Input,
  Item,
  Label,
  ListBox,
  Popover,
  Section,
  Text
} from 'react-aria-components';

<ComboBox>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <Text slot="errorMessage" />
  <Popover>
    <ListBox>
      <Item>
        <Text slot="label" />
        <Text slot="description" />
      </Item>
      <Section>
        <Header />
        <Item />
      </Section>
    </ListBox>
  </Popover>
</ComboBox>

import {
  Button,
  ComboBox,
  Header,
  Input,
  Item,
  Label,
  ListBox,
  Popover,
  Section,
  Text
} from 'react-aria-components';

<ComboBox>
  <Label />
  <Input />
  <Button />
  <Text slot="description" />
  <Text slot="errorMessage" />
  <Popover>
    <ListBox>
      <Item>
        <Text slot="label" />
        <Text slot="description" />
      </Item>
      <Section>
        <Header />
        <Item />
      </Section>
    </ListBox>
  </Popover>
</ComboBox>

If the combo box does not have a visible label, an aria-label or aria-labelledby prop must be passed instead to identify it to assistive technology.

Concepts#

ComboBox makes use of the following concepts:

Composed components#

A ComboBox uses the following components, which may also be used standalone or reused in other components.

Reusable wrappers#

If you will use a ComboBox in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.

This example wraps ComboBox and all of its children together into a single component which accepts a label prop and children, which are passed through to the right places. It also shows how to use the description and errorMessage slots to render help text (see below for details). The Item component is also wrapped to apply class names based on the current state, as described in the styling section.

import type {ComboBoxProps, ItemProps} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyComboBoxProps<T extends object>
  extends Omit<ComboBoxProps<T>, 'children'> {
  label?: string;
  description?: string | null;
  errorMessage?: string | null;
  children: React.ReactNode | ((item: T) => React.ReactNode);
}

function MyComboBox<T extends object>(
  { label, description, errorMessage, children, ...props }: MyComboBoxProps<T>
) {
  return (
    <ComboBox {...props}>
      <Label>{label}</Label>
      <div className="my-combobox-container">
        <Input />
        <Button>▼</Button>
      </div>
      {description && <Text slot="description">{description}</Text>}
      {errorMessage && <Text slot="errorMessage">{errorMessage}</Text>}
      <Popover>
        <ListBox>
          {children}
        </ListBox>
      </Popover>
    </ComboBox>
  );
}

function MyItem(props: ItemProps) {
  return (
    <Item
      {...props}
      className={({ isFocused, isSelected }) =>
        `my-item ${isFocused ? 'focused' : ''} ${isSelected ? 'selected' : ''}`}
    />
  );
}

<MyComboBox label="Ice cream flavor">
  <MyItem>Chocolate</MyItem>
  <MyItem>Mint</MyItem>
  <MyItem>Strawberry</MyItem>
  <MyItem>Vanilla</MyItem>
</MyComboBox>

import type {
  ComboBoxProps,
  ItemProps
} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyComboBoxProps<T extends object>
  extends Omit<ComboBoxProps<T>, 'children'> {
  label?: string;
  description?: string | null;
  errorMessage?: string | null;
  children:
    | React.ReactNode
    | ((item: T) => React.ReactNode);
}

function MyComboBox<T extends object>(
  { label, description, errorMessage, children, ...props }:
    MyComboBoxProps<T>
) {
  return (
    <ComboBox {...props}>
      <Label>{label}</Label>
      <div className="my-combobox-container">
        <Input />
        <Button>▼</Button>
      </div>
      {description && (
        <Text slot="description">{description}</Text>
      )}
      {errorMessage && (
        <Text slot="errorMessage">{errorMessage}</Text>
      )}
      <Popover>
        <ListBox>
          {children}
        </ListBox>
      </Popover>
    </ComboBox>
  );
}

function MyItem(props: ItemProps) {
  return (
    <Item
      {...props}
      className={({ isFocused, isSelected }) =>
        `my-item ${isFocused ? 'focused' : ''} ${
          isSelected ? 'selected' : ''
        }`}
    />
  );
}

<MyComboBox label="Ice cream flavor">
  <MyItem>Chocolate</MyItem>
  <MyItem>Mint</MyItem>
  <MyItem>Strawberry</MyItem>
  <MyItem>Vanilla</MyItem>
</MyComboBox>

import type {
  ComboBoxProps,
  ItemProps
} from 'react-aria-components';
import {Text} from 'react-aria-components';

interface MyComboBoxProps<
  T extends object
> extends
  Omit<
    ComboBoxProps<T>,
    'children'
  > {
  label?: string;
  description?:
    | string
    | null;
  errorMessage?:
    | string
    | null;
  children:
    | React.ReactNode
    | ((
      item: T
    ) =>
      React.ReactNode);
}

function MyComboBox<
  T extends object
>(
  {
    label,
    description,
    errorMessage,
    children,
    ...props
  }: MyComboBoxProps<T>
) {
  return (
    <ComboBox {...props}>
      <Label>
        {label}
      </Label>
      <div className="my-combobox-container">
        <Input />
        <Button>
          ▼
        </Button>
      </div>
      {description && (
        <Text slot="description">
          {description}
        </Text>
      )}
      {errorMessage && (
        <Text slot="errorMessage">
          {errorMessage}
        </Text>
      )}
      <Popover>
        <ListBox>
          {children}
        </ListBox>
      </Popover>
    </ComboBox>
  );
}

function MyItem(
  props: ItemProps
) {
  return (
    <Item
      {...props}
      className={(
        {
          isFocused,
          isSelected
        }
      ) =>
        `my-item ${
          isFocused
            ? 'focused'
            : ''
        } ${
          isSelected
            ? 'selected'
            : ''
        }`}
    />
  );
}

<MyComboBox label="Ice cream flavor">
  <MyItem>
    Chocolate
  </MyItem>
  <MyItem>Mint</MyItem>
  <MyItem>
    Strawberry
  </MyItem>
  <MyItem>
    Vanilla
  </MyItem>
</MyComboBox>

.my-item {
  margin: 2px;
  padding: 4px 8px 4px 22px;
  border-radius: 6px;
  outline: none;
  cursor: default;
  color: var(--text-color);
  font-size: 1.072rem;
  position: relative;

  &.selected {
    font-weight: 600;

    &::before {
      content: '✓';
      content: '✓' / '';
      alt: ' ';
      position: absolute;
      top: 4px;
      left: 4px;
    }
  }

  &.focused {
    background: #e70073;
    color: white;
  }
}

@media (forced-colors: active) {
  .my-item.focused {
    background: Highlight;
    color: HighlightText;
  }
}

.my-item {
  margin: 2px;
  padding: 4px 8px 4px 22px;
  border-radius: 6px;
  outline: none;
  cursor: default;
  color: var(--text-color);
  font-size: 1.072rem;
  position: relative;

  &.selected {
    font-weight: 600;

    &::before {
      content: '✓';
      content: '✓' / '';
      alt: ' ';
      position: absolute;
      top: 4px;
      left: 4px;
    }
  }

  &.focused {
    background: #e70073;
    color: white;
  }
}

@media (forced-colors: active) {
  .my-item.focused {
    background: Highlight;
    color: HighlightText;
  }
}

.my-item {
  margin: 2px;
  padding: 4px 8px 4px 22px;
  border-radius: 6px;
  outline: none;
  cursor: default;
  color: var(--text-color);
  font-size: 1.072rem;
  position: relative;

  &.selected {
    font-weight: 600;

    &::before {
      content: '✓';
      content: '✓' / '';
      alt: ' ';
      position: absolute;
      top: 4px;
      left: 4px;
    }
  }

  &.focused {
    background: #e70073;
    color: white;
  }
}

@media (forced-colors: active) {
  .my-item.focused {
    background: Highlight;
    color: HighlightText;
  }
}

Content#

ComboBox follows the Collection Components API, accepting both static and dynamic collections. The examples above show static collections, which can be used when the full list of options is known ahead of time. Dynamic collections, as shown below, can be used when the options come from an external data source such as an API call, or update over time.

As seen below, an iterable list of options is passed to the ComboBox using the defaultItems prop. Each item accepts an id prop, which is passed to the onSelectionChange handler to identify the selected item. Alternatively, if the item objects contain an id property, as shown in the example below, then this is used automatically and an id prop is not required.

function Example() {
  let options = [
    {id: 1, name: 'Aerospace'},
    {id: 2, name: 'Mechanical'},
    {id: 3, name: 'Civil'},
    {id: 4, name: 'Biomedical'},
    {id: 5, name: 'Nuclear'},
    {id: 6, name: 'Industrial'},
    {id: 7, name: 'Chemical'},
    {id: 8, name: 'Agricultural'},
    {id: 9, name: 'Electrical'}
  ];
  let [majorId, setMajorId] = React.useState<React.Key | null>(null);

  return (
    <>
      <MyComboBox defaultItems={options} onSelectionChange={setMajorId}>
        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>
      <p>Selected topic id: {majorId}</p>
    </>
  );
}

function Example() {
  let options = [
    { id: 1, name: 'Aerospace' },
    { id: 2, name: 'Mechanical' },
    { id: 3, name: 'Civil' },
    { id: 4, name: 'Biomedical' },
    { id: 5, name: 'Nuclear' },
    { id: 6, name: 'Industrial' },
    { id: 7, name: 'Chemical' },
    { id: 8, name: 'Agricultural' },
    { id: 9, name: 'Electrical' }
  ];
  let [majorId, setMajorId] = React.useState<
    React.Key | null
  >(null);

  return (
    <>
      <MyComboBox
        defaultItems={options}
        onSelectionChange={setMajorId}
      >
        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>
      <p>Selected topic id: {majorId}</p>
    </>
  );
}

function Example() {
  let options = [
    {
      id: 1,
      name: 'Aerospace'
    },
    {
      id: 2,
      name: 'Mechanical'
    },
    {
      id: 3,
      name: 'Civil'
    },
    {
      id: 4,
      name: 'Biomedical'
    },
    {
      id: 5,
      name: 'Nuclear'
    },
    {
      id: 6,
      name: 'Industrial'
    },
    {
      id: 7,
      name: 'Chemical'
    },
    {
      id: 8,
      name:
        'Agricultural'
    },
    {
      id: 9,
      name: 'Electrical'
    }
  ];
  let [
    majorId,
    setMajorId
  ] = React.useState<
    React.Key | null
  >(null);

  return (
    <>
      <MyComboBox
        defaultItems={options}
        onSelectionChange={setMajorId}
      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>
      <p>
        Selected topic
        id: {majorId}
      </p>
    </>
  );
}

Value#

A ComboBox's value is empty by default, but an initial, uncontrolled, value can be provided using the defaultInputValue prop. Alternatively, a controlled value can be provided using the inputValue prop. Note that the input value of the ComboBox does not affect the ComboBox's selected option.

function Example() {
  let options = [
    {id: 1, name: 'Adobe Photoshop'},
    {id: 2, name: 'Adobe XD'},
    {id: 3, name: 'Adobe InDesign'},
    {id: 4, name: 'Adobe AfterEffects'},
    {id: 5, name: 'Adobe Illustrator'},
    {id: 6, name: 'Adobe Lightroom'},
    {id: 7, name: 'Adobe Premiere Pro'},
    {id: 8, name: 'Adobe Fresco'},
    {id: 9, name: 'Adobe Dreamweaver'}
  ];
  let [value, setValue] = React.useState('Adobe XD');

  return (
    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap'}}>
      <MyComboBox
        label="Adobe product (Uncontrolled)"
        defaultItems={options}
        defaultInputValue="Adobe XD">        {item => <Item>{item.name}</Item>}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (Controlled)"
        defaultItems={options}
        inputValue={value}
        onInputChange={setValue}>        {item => <Item>{item.name}</Item>}
      </MyComboBox>
    </div>
  );
}

function Example() {
  let options = [
    { id: 1, name: 'Adobe Photoshop' },
    { id: 2, name: 'Adobe XD' },
    { id: 3, name: 'Adobe InDesign' },
    { id: 4, name: 'Adobe AfterEffects' },
    { id: 5, name: 'Adobe Illustrator' },
    { id: 6, name: 'Adobe Lightroom' },
    { id: 7, name: 'Adobe Premiere Pro' },
    { id: 8, name: 'Adobe Fresco' },
    { id: 9, name: 'Adobe Dreamweaver' }
  ];
  let [value, setValue] = React.useState('Adobe XD');

  return (
    <div
      style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}
    >
      <MyComboBox
        label="Adobe product (Uncontrolled)"
        defaultItems={options}
        defaultInputValue="Adobe XD"
      >        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (Controlled)"
        defaultItems={options}
        inputValue={value}
        onInputChange={setValue}
      >        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>
    </div>
  );
}

function Example() {
  let options = [
    {
      id: 1,
      name:
        'Adobe Photoshop'
    },
    {
      id: 2,
      name: 'Adobe XD'
    },
    {
      id: 3,
      name:
        'Adobe InDesign'
    },
    {
      id: 4,
      name:
        'Adobe AfterEffects'
    },
    {
      id: 5,
      name:
        'Adobe Illustrator'
    },
    {
      id: 6,
      name:
        'Adobe Lightroom'
    },
    {
      id: 7,
      name:
        'Adobe Premiere Pro'
    },
    {
      id: 8,
      name:
        'Adobe Fresco'
    },
    {
      id: 9,
      name:
        'Adobe Dreamweaver'
    }
  ];
  let [value, setValue] =
    React.useState(
      'Adobe XD'
    );

  return (
    <div
      style={{
        display: 'flex',
        gap: 16,
        flexWrap: 'wrap'
      }}
    >
      <MyComboBox
        label="Adobe product (Uncontrolled)"
        defaultItems={options}
        defaultInputValue="Adobe XD"
      >        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (Controlled)"
        defaultItems={options}
        inputValue={value}
        onInputChange={setValue}
      >        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>
    </div>
  );
}

Custom values#

By default, ComboBox doesn't allow users to specify a value that doesn't exist in the list of options and will revert the input value to the current selected value on blur. By specifying allowsCustomValue, this behavior is suppressed and the user is free to enter any value within the field.

<MyComboBox label="Favorite Animal" allowsCustomValue>
  <Item id="red panda">Red Panda</Item>
  <Item id="cat">Cat</Item>
  <Item id="dog">Dog</Item>
  <Item id="aardvark">Aardvark</Item>
  <Item id="kangaroo">Kangaroo</Item>
  <Item id="snake">Snake</Item>
</MyComboBox>

<MyComboBox label="Favorite Animal" allowsCustomValue>
  <Item id="red panda">Red Panda</Item>
  <Item id="cat">Cat</Item>
  <Item id="dog">Dog</Item>
  <Item id="aardvark">Aardvark</Item>
  <Item id="kangaroo">Kangaroo</Item>
  <Item id="snake">Snake</Item>
</MyComboBox>

<MyComboBox
  label="Favorite Animal"
  allowsCustomValue
>
  <Item id="red panda">
    Red Panda
  </Item>
  <Item id="cat">
    Cat
  </Item>
  <Item id="dog">
    Dog
  </Item>
  <Item id="aardvark">
    Aardvark
  </Item>
  <Item id="kangaroo">
    Kangaroo
  </Item>
  <Item id="snake">
    Snake
  </Item>
</MyComboBox>

HTML forms#

ComboBox supports the name prop for integration with HTML forms. By default, the id of the selected item will be submitted to the server. If the formValue prop is set to "text" or the allowsCustomValue prop is true, the text in the input field will be submitted instead.

<div style={{display: 'flex', gap: 16, flexWrap: 'wrap'}}>
  <MyComboBox
    label="Favorite Animal"
    name="favoriteAnimalId"  >
    <Item id="panda">Panda</Item>
    <Item id="cat">Cat</Item>
    <Item id="dog">Dog</Item>
  </MyComboBox>
  <MyComboBox
    label="Ice cream flavor"
    name="iceCream"
    formValue="text"
    allowsCustomValue  >
    <Item>Chocolate</Item>
    <Item>Mint</Item>
    <Item>Strawberry</Item>
    <Item>Vanilla</Item>
  </MyComboBox>
</div>

<div style={{display: 'flex', gap: 16, flexWrap: 'wrap'}}>
  <MyComboBox
    label="Favorite Animal"
    name="favoriteAnimalId"  >
    <Item id="panda">Panda</Item>
    <Item id="cat">Cat</Item>
    <Item id="dog">Dog</Item>
  </MyComboBox>
  <MyComboBox
    label="Ice cream flavor"
    name="iceCream"
    formValue="text"
    allowsCustomValue  >
    <Item>Chocolate</Item>
    <Item>Mint</Item>
    <Item>Strawberry</Item>
    <Item>Vanilla</Item>
  </MyComboBox>
</div>

<div
  style={{
    display: 'flex',
    gap: 16,
    flexWrap: 'wrap'
  }}
>
  <MyComboBox
    label="Favorite Animal"
    name="favoriteAnimalId"  >
    <Item id="panda">
      Panda
    </Item>
    <Item id="cat">
      Cat
    </Item>
    <Item id="dog">
      Dog
    </Item>
  </MyComboBox>
  <MyComboBox
    label="Ice cream flavor"
    name="iceCream"
    formValue="text"
    allowsCustomValue  >
    <Item>
      Chocolate
    </Item>
    <Item>Mint</Item>
    <Item>
      Strawberry
    </Item>
    <Item>
      Vanilla
    </Item>
  </MyComboBox>
</div>

Selection#

Setting a selected option can be done by using the defaultSelectedKey or selectedKey prop. The selected key corresponds to the key of an item. See Events for more details on selection events. Additionally, see the react-stately Selection docs for caveats regarding selection prop typing.

function Example() {
  let options = [
    {id: 1, name: 'Adobe Photoshop'},
    {id: 2, name: 'Adobe XD'},
    {id: 3, name: 'Adobe InDesign'},
    {id: 4, name: 'Adobe AfterEffects'},
    {id: 5, name: 'Adobe Illustrator'},
    {id: 6, name: 'Adobe Lightroom'},
    {id: 7, name: 'Adobe Premiere Pro'},
    {id: 8, name: 'Adobe Fresco'},
    {id: 9, name: 'Adobe Dreamweaver'}
  ];
  let [productId, setProductId] = React.useState<React.Key>(9);

  return (
    <div style={{display: 'flex', gap: 16, flexWrap: 'wrap'}}>
      <MyComboBox
        label="Pick an Adobe product (uncontrolled)"
        defaultItems={options}
        defaultSelectedKey={9}      >
        {item => <Item>{item.name}</Item>}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (controlled)"
        defaultItems={options}
        selectedKey={productId}
        onSelectionChange={selected => setProductId(selected)}      >
        {item => <Item>{item.name}</Item>}
      </MyComboBox>
    </div>
  );
}

function Example() {
  let options = [
    { id: 1, name: 'Adobe Photoshop' },
    { id: 2, name: 'Adobe XD' },
    { id: 3, name: 'Adobe InDesign' },
    { id: 4, name: 'Adobe AfterEffects' },
    { id: 5, name: 'Adobe Illustrator' },
    { id: 6, name: 'Adobe Lightroom' },
    { id: 7, name: 'Adobe Premiere Pro' },
    { id: 8, name: 'Adobe Fresco' },
    { id: 9, name: 'Adobe Dreamweaver' }
  ];
  let [productId, setProductId] = React.useState<React.Key>(
    9
  );

  return (
    <div
      style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}
    >
      <MyComboBox
        label="Pick an Adobe product (uncontrolled)"
        defaultItems={options}
        defaultSelectedKey={9}      >
        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (controlled)"
        defaultItems={options}
        selectedKey={productId}
        onSelectionChange={(selected) =>
          setProductId(selected)}      >
        {(item) => <Item>{item.name}</Item>}
      </MyComboBox>
    </div>
  );
}

function Example() {
  let options = [
    {
      id: 1,
      name:
        'Adobe Photoshop'
    },
    {
      id: 2,
      name: 'Adobe XD'
    },
    {
      id: 3,
      name:
        'Adobe InDesign'
    },
    {
      id: 4,
      name:
        'Adobe AfterEffects'
    },
    {
      id: 5,
      name:
        'Adobe Illustrator'
    },
    {
      id: 6,
      name:
        'Adobe Lightroom'
    },
    {
      id: 7,
      name:
        'Adobe Premiere Pro'
    },
    {
      id: 8,
      name:
        'Adobe Fresco'
    },
    {
      id: 9,
      name:
        'Adobe Dreamweaver'
    }
  ];
  let [
    productId,
    setProductId
  ] = React.useState<
    React.Key
  >(9);

  return (
    <div
      style={{
        display: 'flex',
        gap: 16,
        flexWrap: 'wrap'
      }}
    >
      <MyComboBox
        label="Pick an Adobe product (uncontrolled)"
        defaultItems={options}
        defaultSelectedKey={9}      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>

      <MyComboBox
        label="Pick an Adobe product (controlled)"
        defaultItems={options}
        selectedKey={productId}
        onSelectionChange={(selected) =>
          setProductId(
            selected
          )}      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>
    </div>
  );
}

Links#

By default, interacting with an item in a ComboBox selects it and updates the input value. Alternatively, items may be links to another page or website. This can be achieved by passing the href prop to the <Item> component. Interacting with link items navigates to the provided URL and does not update the selection or input value.

<MyComboBox label="Tech company websites">
  <Item href="https://adobe.com/" target="_blank">Adobe</Item>
  <Item href="https://apple.com/" target="_blank">Apple</Item>
  <Item href="https://google.com/" target="_blank">Google</Item>
  <Item href="https://microsoft.com/" target="_blank">Microsoft</Item>
</MyComboBox>

<MyComboBox label="Tech company websites">
  <Item href="https://adobe.com/" target="_blank">
    Adobe
  </Item>
  <Item href="https://apple.com/" target="_blank">
    Apple
  </Item>
  <Item href="https://google.com/" target="_blank">
    Google
  </Item>
  <Item href="https://microsoft.com/" target="_blank">
    Microsoft
  </Item>
</MyComboBox>

<MyComboBox label="Tech company websites">
  <Item
    href="https://adobe.com/"
    target="_blank"
  >
    Adobe
  </Item>
  <Item
    href="https://apple.com/"
    target="_blank"
  >
    Apple
  </Item>
  <Item
    href="https://google.com/"
    target="_blank"
  >
    Google
  </Item>
  <Item
    href="https://microsoft.com/"
    target="_blank"
  >
    Microsoft
  </Item>
</MyComboBox>

Client side routing#

The <Item> component works with frameworks and client side routers like Next.js and React Router. As with other React Aria components that support links, this works via the RouterProvider component at the root of your app. See the client side routing guide to learn how to set this up.

Sections#

ComboBox supports sections in order to group options. Sections can be used by wrapping groups of items in a Section element. A <Header> element may also be included to label the section.

Static items#

import {Section, Header} from 'react-aria-components';

<MyComboBox label="Preferred fruit or vegetable">
  <Section>
    <Header>Fruit</Header>
    <Item id="Apple">Apple</Item>
    <Item id="Banana">Banana</Item>
    <Item id="Orange">Orange</Item>
    <Item id="Honeydew">Honeydew</Item>
    <Item id="Grapes">Grapes</Item>
    <Item id="Watermelon">Watermelon</Item>
    <Item id="Cantaloupe">Cantaloupe</Item>
    <Item id="Pear">Pear</Item>
  </Section>
  <Section>
    <Header>Vegetable</Header>
    <Item id="Cabbage">Cabbage</Item>
    <Item id="Broccoli">Broccoli</Item>
    <Item id="Carrots">Carrots</Item>
    <Item id="Lettuce">Lettuce</Item>
    <Item id="Spinach">Spinach</Item>
    <Item id="Bok Choy">Bok Choy</Item>
    <Item id="Cauliflower">Cauliflower</Item>
    <Item id="Potatoes">Potatoes</Item>
  </Section>
</MyComboBox>

import {Section, Header} from 'react-aria-components';

<MyComboBox label="Preferred fruit or vegetable">
  <Section>
    <Header>Fruit</Header>
    <Item id="Apple">Apple</Item>
    <Item id="Banana">Banana</Item>
    <Item id="Orange">Orange</Item>
    <Item id="Honeydew">Honeydew</Item>
    <Item id="Grapes">Grapes</Item>
    <Item id="Watermelon">Watermelon</Item>
    <Item id="Cantaloupe">Cantaloupe</Item>
    <Item id="Pear">Pear</Item>
  </Section>
  <Section>
    <Header>Vegetable</Header>
    <Item id="Cabbage">Cabbage</Item>
    <Item id="Broccoli">Broccoli</Item>
    <Item id="Carrots">Carrots</Item>
    <Item id="Lettuce">Lettuce</Item>
    <Item id="Spinach">Spinach</Item>
    <Item id="Bok Choy">Bok Choy</Item>
    <Item id="Cauliflower">Cauliflower</Item>
    <Item id="Potatoes">Potatoes</Item>
  </Section>
</MyComboBox>

import {
  Header,
  Section
} from 'react-aria-components';

<MyComboBox label="Preferred fruit or vegetable">
  <Section>
    <Header>
      Fruit
    </Header>
    <Item id="Apple">
      Apple
    </Item>
    <Item id="Banana">
      Banana
    </Item>
    <Item id="Orange">
      Orange
    </Item>
    <Item id="Honeydew">
      Honeydew
    </Item>
    <Item id="Grapes">
      Grapes
    </Item>
    <Item id="Watermelon">
      Watermelon
    </Item>
    <Item id="Cantaloupe">
      Cantaloupe
    </Item>
    <Item id="Pear">
      Pear
    </Item>
  </Section>
  <Section>
    <Header>
      Vegetable
    </Header>
    <Item id="Cabbage">
      Cabbage
    </Item>
    <Item id="Broccoli">
      Broccoli
    </Item>
    <Item id="Carrots">
      Carrots
    </Item>
    <Item id="Lettuce">
      Lettuce
    </Item>
    <Item id="Spinach">
      Spinach
    </Item>
    <Item id="Bok Choy">
      Bok Choy
    </Item>
    <Item id="Cauliflower">
      Cauliflower
    </Item>
    <Item id="Potatoes">
      Potatoes
    </Item>
  </Section>
</MyComboBox>

Dynamic items#

Sections used with dynamic items are populated from a hierarchical data structure. Please note that Section takes an array of data using the items prop only. If the section also has a header, the Collection component can be used to render the child items.

import {Collection} from 'react-aria-components';

function Example() {
  let options = [
    {name: 'Fruit', children: [
      {name: 'Apple'},
      {name: 'Banana'},
      {name: 'Orange'},
      {name: 'Honeydew'},
      {name: 'Grapes'},
      {name: 'Watermelon'},
      {name: 'Cantaloupe'},
      {name: 'Pear'}
    ]},
    {name: 'Vegetable', children: [
      {name: 'Cabbage'},
      {name: 'Broccoli'},
      {name: 'Carrots'},
      {name: 'Lettuce'},
      {name: 'Spinach'},
      {name: 'Bok Choy'},
      {name: 'Cauliflower'},
      {name: 'Potatoes'}
    ]}
  ];

  return (
    <MyComboBox label="Preferred fruit or vegetable" defaultItems={options}>
      {section => (
        <Section id={section.name}>
          <Header>{section.name}</Header>
          <Collection items={section.children}>
            {item => <Item id={item.name}>{item.name}</Item>}
          </Collection>
        </Section>
      )}
    </MyComboBox>
  );
}

import {Collection} from 'react-aria-components';

function Example() {
  let options = [
    {
      name: 'Fruit',
      children: [
        { name: 'Apple' },
        { name: 'Banana' },
        { name: 'Orange' },
        { name: 'Honeydew' },
        { name: 'Grapes' },
        { name: 'Watermelon' },
        { name: 'Cantaloupe' },
        { name: 'Pear' }
      ]
    },
    {
      name: 'Vegetable',
      children: [
        { name: 'Cabbage' },
        { name: 'Broccoli' },
        { name: 'Carrots' },
        { name: 'Lettuce' },
        { name: 'Spinach' },
        { name: 'Bok Choy' },
        { name: 'Cauliflower' },
        { name: 'Potatoes' }
      ]
    }
  ];

  return (
    <MyComboBox
      label="Preferred fruit or vegetable"
      defaultItems={options}
    >
      {(section) => (
        <Section id={section.name}>
          <Header>{section.name}</Header>
          <Collection items={section.children}>
            {(item) => (
              <Item id={item.name}>{item.name}</Item>
            )}
          </Collection>
        </Section>
      )}
    </MyComboBox>
  );
}

import {Collection} from 'react-aria-components';

function Example() {
  let options = [
    {
      name: 'Fruit',
      children: [
        {
          name: 'Apple'
        },
        {
          name: 'Banana'
        },
        {
          name: 'Orange'
        },
        {
          name:
            'Honeydew'
        },
        {
          name: 'Grapes'
        },
        {
          name:
            'Watermelon'
        },
        {
          name:
            'Cantaloupe'
        },
        { name: 'Pear' }
      ]
    },
    {
      name: 'Vegetable',
      children: [
        {
          name: 'Cabbage'
        },
        {
          name:
            'Broccoli'
        },
        {
          name: 'Carrots'
        },
        {
          name: 'Lettuce'
        },
        {
          name: 'Spinach'
        },
        {
          name:
            'Bok Choy'
        },
        {
          name:
            'Cauliflower'
        },
        {
          name:
            'Potatoes'
        }
      ]
    }
  ];

  return (
    <MyComboBox
      label="Preferred fruit or vegetable"
      defaultItems={options}
    >
      {(section) => (
        <Section
          id={section
            .name}
        >
          <Header>
            {section
              .name}
          </Header>
          <Collection
            items={section
              .children}
          >
            {(item) => (
              <Item
                id={item
                  .name}
              >
                {item
                  .name}
              </Item>
            )}
          </Collection>
        </Section>
      )}
    </MyComboBox>
  );
}

Text slots#

By default, items in a ComboBox are labeled by their text contents for accessibility. Items also support the "label" and "description" slots to separate primary and secondary content, which improves screen reader announcements and can also be used for styling purposes.

Note: The ARIA spec prohibits listbox items from including interactive content such as buttons, checkboxes, etc.

import {Text} from 'react-aria-components';

<MyComboBox label="Select action">
  <Item textValue="Add to queue">
    <Text slot="label">Add to queue</Text>
    <Text slot="description">Add to current watch queue.</Text>
  </Item>
  <Item textValue="Add review">
    <Text slot="label">Add review</Text>
    <Text slot="description">Post a review for the episode.</Text>
  </Item>
  <Item textValue="Subscribe to series">
    <Text slot="label">Subscribe to series</Text>
    <Text slot="description">
      Add series to your subscription list and be notified when a new episode
      airs.
    </Text>
  </Item>
  <Item textValue="Report">
    <Text slot="label">Report</Text>
    <Text slot="description">Report an issue/violation.</Text>
  </Item>
</MyComboBox>

import {Text} from 'react-aria-components';

<MyComboBox label="Select action">
  <Item textValue="Add to queue">
    <Text slot="label">Add to queue</Text>
    <Text slot="description">
      Add to current watch queue.
    </Text>
  </Item>
  <Item textValue="Add review">
    <Text slot="label">Add review</Text>
    <Text slot="description">
      Post a review for the episode.
    </Text>
  </Item>
  <Item textValue="Subscribe to series">
    <Text slot="label">Subscribe to series</Text>
    <Text slot="description">
      Add series to your subscription list and be notified
      when a new episode airs.
    </Text>
  </Item>
  <Item textValue="Report">
    <Text slot="label">Report</Text>
    <Text slot="description">
      Report an issue/violation.
    </Text>
  </Item>
</MyComboBox>

import {Text} from 'react-aria-components';

<MyComboBox label="Select action">
  <Item textValue="Add to queue">
    <Text slot="label">
      Add to queue
    </Text>
    <Text slot="description">
      Add to current
      watch queue.
    </Text>
  </Item>
  <Item textValue="Add review">
    <Text slot="label">
      Add review
    </Text>
    <Text slot="description">
      Post a review for
      the episode.
    </Text>
  </Item>
  <Item textValue="Subscribe to series">
    <Text slot="label">
      Subscribe to
      series
    </Text>
    <Text slot="description">
      Add series to
      your subscription
      list and be
      notified when a
      new episode airs.
    </Text>
  </Item>
  <Item textValue="Report">
    <Text slot="label">
      Report
    </Text>
    <Text slot="description">
      Report an
      issue/violation.
    </Text>
  </Item>
</MyComboBox>

Events#

ComboBox supports selection via mouse, keyboard, and touch. You can handle all of these via the onSelectionChange prop. ComboBox will pass the selected key to the onSelectionChange handler. Additionally, ComboBox accepts an onInputChange prop which is triggered whenever the value is edited by the user, whether through typing or option selection.

The example below uses onSelectionChange and onInputChange to update the selection and input value stored in React state.

function Example() {
  let options = [
    {id: 1, name: 'Aerospace'},
    {id: 2, name: 'Mechanical'},
    {id: 3, name: 'Civil'},
    {id: 4, name: 'Biomedical'},
    {id: 5, name: 'Nuclear'},
    {id: 6, name: 'Industrial'},
    {id: 7, name: 'Chemical'},
    {id: 8, name: 'Agricultural'},
    {id: 9, name: 'Electrical'}
  ];

  let [value, setValue] = React.useState('');
  let [majorId, setMajorId] = React.useState('');

  let onSelectionChange = (id) => {
    setMajorId(id);
  };

  let onInputChange = (value) => {
    setValue(value)
  };

  return (
    <>
      <p>Current selected major id: {majorId}</p>
      <p>Current input text: {value}</p>
      <MyComboBox
        label="Pick a engineering major"
        defaultItems={options}
        selectedKey={majorId}
        onSelectionChange={onSelectionChange}
        onInputChange={onInputChange}      >
        {item => <Item>{item.name}</Item>}
      </MyComboBox>
    </>
  );
}

function Example() {
  let options = [
    {id: 1, name: 'Aerospace'},
    {id: 2, name: 'Mechanical'},
    {id: 3, name: 'Civil'},
    {id: 4, name: 'Biomedical'},
    {id: 5, name: 'Nuclear'},
    {id: 6, name: 'Industrial'},
    {id: 7, name: 'Chemical'},
    {id: 8, name: 'Agricultural'},
    {id: 9, name: 'Electrical'}
  ];

  let [value, setValue] = React.useState('');
  let [majorId, setMajorId] = React.useState('');

  let onSelectionChange = (id) => {
    setMajorId(id);
  };

  let onInputChange = (value) => {
    setValue(value)
  };

  return (
    <>
      <p>Current selected major id: {majorId}</p>
      <p>Current input text: {value}</p>
      <MyComboBox
        label="Pick a engineering major"
        defaultItems={options}
        selectedKey={majorId}
        onSelectionChange={onSelectionChange}
        onInputChange={onInputChange}      >
        {item => <Item>{item.name}</Item>}
      </MyComboBox>
    </>
  );
}

function Example() {
  let options = [
    {
      id: 1,
      name: 'Aerospace'
    },
    {
      id: 2,
      name: 'Mechanical'
    },
    {
      id: 3,
      name: 'Civil'
    },
    {
      id: 4,
      name: 'Biomedical'
    },
    {
      id: 5,
      name: 'Nuclear'
    },
    {
      id: 6,
      name: 'Industrial'
    },
    {
      id: 7,
      name: 'Chemical'
    },
    {
      id: 8,
      name:
        'Agricultural'
    },
    {
      id: 9,
      name: 'Electrical'
    }
  ];

  let [value, setValue] =
    React.useState('');
  let [
    majorId,
    setMajorId
  ] = React.useState('');

  let onSelectionChange =
    (id) => {
      setMajorId(id);
    };

  let onInputChange = (
    value
  ) => {
    setValue(value);
  };

  return (
    <>
      <p>
        Current selected
        major id:{' '}
        {majorId}
      </p>
      <p>
        Current input
        text: {value}
      </p>
      <MyComboBox
        label="Pick a engineering major"
        defaultItems={options}
        selectedKey={majorId}
        onSelectionChange={onSelectionChange}
        onInputChange={onInputChange}      >
        {(item) => (
          <Item>
            {item.name}
          </Item>
        )}
      </MyComboBox>
    </>
  );
}