Skip to main content

MCDS

Combobox

A combobox component that combines a text input with a dropdown list of options.

Code

<Combobox
  id="country"
  label="Select a country"
  options={[
    { id: 'us', label: 'United States' },
    { id: 'ca', label: 'Canada' },
    { id: 'mx', label: 'Mexico' },
    { id: 'uk', label: 'United Kingdom' },
    { id: 'fr', label: 'France' }
  ]}
  required={true}
  autocomplete={true}
/>

Props

Name Type Required Description
id string No Unique identifier for the combobox. Auto-generated if not provided
name string No Name attribute for the input. Defaults to id if not provided
label string Yes Label text for the combobox
options Option[] Yes Array of options available for selection
value string No Initial value for the combobox input
Default: ""
required boolean No Whether the combobox is required
Default: false
disabled boolean No Whether the combobox is disabled
Default: false
autocomplete boolean No Whether to enable autocomplete functionality
Default: false

Option Props

Name Type Required Description
id string Yes Unique identifier for the option
label string Yes Display text for the option

Usage

✅ Do’s

  • Use for large lists of options that need filtering
  • Provide clear, descriptive labels

❌ Don’t’s

  • Don’t use for simple yes/no choices (use radio buttons instead)
  • Don’t use for very small lists (use select instead)

Accessibility

Keyboard Navigation

Screen Reader Support