Combobox

Combobox defines how EnterUI handles a searchable single-select with keyboard-first navigation, including default structure, accessible states, and token-driven styling.

#Default usage

<Combobox defaultValue="next">
  <ComboboxTrigger placeholder="Pick a framework" />
  <ComboboxContent>
    <ComboboxInput placeholder="Search frameworks" />
    <ComboboxList>
      <ComboboxItem value="next">Next.js</ComboboxItem>
      <ComboboxItem value="remix">Remix</ComboboxItem>
      <ComboboxItem value="astro">Astro</ComboboxItem>
      <ComboboxItem value="vite">Vite</ComboboxItem>
      <ComboboxEmpty />
    </ComboboxList>
  </ComboboxContent>
</Combobox>

#Import

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxTrigger,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Combobox follows the WAI-ARIA combobox listbox pattern. The trigger announces an expanded listbox; the input has role="combobox" with aria-controls and aria-activedescendant; items use role="option". Arrow keys move highlight, Enter selects, Escape closes.

#API

• Combobox: value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, disabled, invalid, filter.
• ComboboxTrigger: placeholder and any button props. Children replace the default value/chevron.
• ComboboxContent: forwards Radix popover content props.
• ComboboxInput: searchable input. Controlled internally.
• ComboboxItem: value, label, disabled, onSelect.
• ComboboxGroup, ComboboxEmpty, ComboboxList, ComboboxValue.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.