FormikAutocomplete

Basic Usage


import { FormikAutocomplete } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ autocomplete: '' }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        autocomplete: yup.string().required('This field is required')
    })}
>
    <Form method="post">
        <FormikAutocomplete
            name="autocomplete"
            label="Greek Letters"
            options={[
                { value: 'alpha', label: 'Alpha' },
                { value: 'beta', label: 'Beta' },
                { value: 'gamma', label: 'Gamma' },
                { value: 'delta', label: 'Delta' },
                ...
            ]}
        />
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions	`false`
`dropdownButtonOpenText`	`string` The accessible text to display to screenreaders, labelling the dropdown toggle button when the menu is closed.	`Open`
`dropdownButtonCloseText`	`string` The accessible text to display to screenreaders, labelling the dropdown toggle button when the menu is open.	`Close`
`fullWidth`	`ResponsiveVariant<boolean>` If `true`, the input will take up the full width of its container.
`id`	`string` An accessible ID for the input element. If not provided, one will be generated internally.
`name`	`string` The field name used on the POST request when the form is submitted.
`noDataLabel`	`string` The text to display when the user has entered a search term, but there are no matching options.	`'No options'`
`onBlur`	`() => void` Callback fired whenever the input element loses user focus.
`onChange`	`(label: string \| null, value: string \| null, reason: AutocompleteChangeReason) => void` Callback fired whenever the selected option changes. `label` The label of the selected option, or `null` if no option is selected. `value` The value of the selected option, or `null` if no option is selected. `reason` The reason for the change, which can be one of: `selectOption`: The user selected an option. `clear`: The user cleared the selection.
`onClose`	`(reason: AutocompleteCloseReason) => void` Callback fired whenever the combobox menu is closed. `reason` The reason the menu was closed, which can be one of: `toggleInput`: The user toggled the input. `escape`: The user pressed the escape key. `selectOption`: The user selected an option. `blur`: The input lost focus. `toggleButton`: The user clicked the toggle button.
`onHighlightChange`	`(label: string \| null, value: string \| null, reason: AutocompleteHighlightChangeReason) => void` Callback fired whenever the highlighted menu option changes. `label` The label of the highlighted option, or `null` if no option is highlighted. `value` The value of the highlighted option, or `null` if no option is highlighted. `reason` The reason for the highlight change, which can be one of: `keyboard`: The user navigated using the keyboard. `mouse`: The user navigated using the mouse. `auto`: The highlight was set automatically.
`onInputChange`	`(label: string \| null, value: string \| null, reason: AutocompleteInputChangeReason) => void` Callback fired whenever the input value changes. `label` The label of the input, or `null` if no label is set. `value` The current value of the input, or `null` if the input is empty. `reason` The reason for the input change, which can be one of: `input`: The user typed in the input. `reset`: The input was reset to its default value. `clear`: The user cleared the input.
`onItemClick`	`(label: string \| null \| undefined, value: string \| null \| undefined, reason: string) => void` Callback fired whenever a customer explicitly clicks on a dropdown item. `label` The label of the clicked option, or `null` if no option is clicked. `value` The value of the clicked option, or `null` if no option is clicked. `reason` The reason for the click, which is always `'selectOption'` when this callback is called.
`onClear`	`() => void` Callback fired whenever the clear icon is clicked on the input.
`onOpen`	`() => void` Callback fired whenever the combobox menu is opened.
`options`	`AutocompleteOption[]` The options to display in the Autocomplete dropdown. Each option should have a `label` and `value` property.
`label`	`string` The label to display inside the TextField.
`optional`	`boolean` Add an optional flag to the label for this field (controlled by https://coral-oe.vercel.app/?path=/docs/guides-configuration—docs#overrides-optional-indicator optionalIndicator). This should be set to true if you have set this field to be optional in your validation schema.	`false`
`theme`	`ResponsiveVariant<"secondary500" \| "base100">` The colourway applied to this component.
`isLoading`	`boolean` If `true`, the Autocomplete will display a loading state, which will disable the input and show a spinner.
`loadingText`	`string` The text to display when the Autocomplete is in a loading state.
`filterOptions`	`(option?: string \| undefined, inputValue?: string \| undefined) => boolean` A function that filters the options list based on the supplied option and input value.
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details