`<Combobox>` Component

Default, batteries-included typeahead combobox


    <Combobox 
      onSelect={(e) => console.log(e)} 
      options={[
      'Apple',
      'Orange', 
      'Banana',
      'Pineapple',
      'Kiwi'
      ]}
      />


    <Combobox 
      onSelect={(e) => console.log(e)} 
      options={[
      'Apple',
      'Orange', 
      'Banana',
      'Pineapple',
      'Kiwi'
      ]}
      />

Props

Name	Description
`label*` string	A label for the combobox, used directly for aria-label
`options*` array	Array of string values for the dropdown options
`onSelect` function	A handler called when a new option is selected, takes the newly selected option value as its only parameter
`inputProps` object	Props passed to the combobox input, props listed below are not an exhaustive list, conforms to React's InputHTMLAttributes Object contains nested props, see below:
`inputProps.onChange` function	A `onChange` handler for the input
`inputProps.onBlur` function	An `onBlur` handler for the input
`openOnFocus` boolean	Controls whether the dropdown opens on focus of the input
`buttonLabel` string	Accessible label for the dropdown button
`invalidInputValue` boolean	Declaratively mark the input as invalid, useful for form inputs (validation)
`renderOption` function	Render function to customize the display of options

Other Examples

With custom option component


    <Combobox 
      onSelect={(e) => console.log(e)} 
      renderOption={opt => <span style={{ color: 'var(--consul)'}}>{opt}</span>}
      options={[
      'Apple',
      'Orange', 
      'Banana',
      'Pineapple',
      'Kiwi'
      ]}
      />


    <Combobox 
      onSelect={(e) => console.log(e)} 
      renderOption={opt => <span style={{ color: 'var(--consul)'}}>{opt}</span>}
      options={[
      'Apple',
      'Orange', 
      'Banana',
      'Pineapple',
      'Kiwi'
      ]}
      />

With composition of components


      <ComboboxBase onSelect={() => console.log('foo')}>
        <ComboboxInput aria-labelledby="demo" />
        <ComboboxPopover>
          <ComboboxList aria-labelledby="demo">
            <ComboboxOption value="Apple" />
            <ComboboxOption value="Banana" />
            <ComboboxOption value="Orange" />
            <ComboboxOption value="Pineapple" />
            <ComboboxOption value="Kiwi" />
          </ComboboxList>
      </ComboboxPopover>
      </ComboboxBase>


      <ComboboxBase onSelect={() => console.log('foo')}>
        <ComboboxInput aria-labelledby="demo" />
        <ComboboxPopover>
          <ComboboxList aria-labelledby="demo">
            <ComboboxOption value="Apple" />
            <ComboboxOption value="Banana" />
            <ComboboxOption value="Orange" />
            <ComboboxOption value="Pineapple" />
            <ComboboxOption value="Kiwi" />
          </ComboboxList>
      </ComboboxPopover>
      </ComboboxBase>

Example Form


        <Formik
          initialValues={{ favoriteFruit: '' }}
          onSubmit={(values) => alert(JSON.stringify(values))}
          validateOnBlur
          validate={values => {
            const errors = {};
            const fruits = [
                'Apple',
                'Orange',
                'Banana',
                'Pineapple',
                'Kiwi'
                ]
            if (!fruits.includes(values.favoriteFruit)) {
              errors.favoriteFruit = 'Please select a value from the list';
            }
            return errors;
          }}
        >
        {({ handleSubmit }) =>  (
          <Form>
               <ComboboxField
                name="favoriteFruit"
                options={[
                'Apple',
                'Orange',
                'Banana',
                'Pineapple',
                'Kiwi'
                ]}
                />
                <button onClick={handleSubmit}>Submit!</button>
            <FormikStateViewer />
          </Form>
        )}
        </Formik>


        <Formik
          initialValues={{ favoriteFruit: '' }}
          onSubmit={(values) => alert(JSON.stringify(values))}
          validateOnBlur
          validate={values => {
            const errors = {};
            const fruits = [
                'Apple',
                'Orange',
                'Banana',
                'Pineapple',
                'Kiwi'
                ]
            if (!fruits.includes(values.favoriteFruit)) {
              errors.favoriteFruit = 'Please select a value from the list';
            }
            return errors;
          }}
        >
        {({ handleSubmit }) =>  (
          <Form>
               <ComboboxField
                name="favoriteFruit"
                options={[
                'Apple',
                'Orange',
                'Banana',
                'Pineapple',
                'Kiwi'
                ]}
                />
                <button onClick={handleSubmit}>Submit!</button>
            <FormikStateViewer />
          </Form>
        )}
        </Formik>

`<Combobox>` Component

Default, batteries-included typeahead combobox

Code Editor

Props

Other Examples

With custom option component

Code Editor

With composition of components

Code Editor

Example Form

Code Editor

<Combobox> Component

Default, batteries-included typeahead combobox

Code Editor

Props

Other Examples

With custom option component

Code Editor

With composition of components

Code Editor

Example Form

Code Editor

`<Combobox>` Component