/

<Combobox> Component

Default, batteries-included typeahead combobox

Share
Code Editor


    <Combobox 

      onSelect={(e) => console.log(e)} 

      options={[

      'Apple',

      'Orange', 

      'Banana',

      'Pineapple',

      'Kiwi'

      ]}

      />

Props

NameDescription
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

Share
Code Editor


    <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

Share
Code Editor


      <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

Share
Code Editor


        <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>