FormikSelect

Basic Usage


import { FormikSelect } from '@krakentech/coral-formik';
import { Button } from '@krakentech/coral';
import { Formik, Form } from 'formik';
 
<Formik
    initialValues={{ select: null }}
    onSubmit={() => console.log('Submitted')}
    validationSchema={yup.object().shape({
        select: yup.object().nullable().required('This field is required'),
    })}
>
    <Form method="post">
        <FormikSelect
            name="select"
            label="Select Greek Letter"
            values={[
                { label: 'Alpha', value: 'Alpha' },
                { label: 'Alpha', value: 'Alpha' },
                { label: 'Beta', value: 'Beta' },
                ...
            ]}
        />
        <Button type="submit">Submit</Button>
    </Form>
</Formik>

Full API

Name	Type	Default
`defaultOpen`	`boolean` If `true`, the component will be open by default.	`false`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`label`	`string` The accessible label for the select.	`Label`
`id`	`string` The HTML ID passed to both the label, and the select.
`name`	`string` The field name used on the POST request when the form is submitted.
`onBlur`	`FocusEventHandler<HTMLButtonElement>` Callback fired when the select loses user focus.
`onChange`	`(value?: SelectOption \| null \| undefined) => void` Callback fired each time the user selects an option. `value` The value of the selected option.
`onClose`	`() => void` Callback fired when the select is closed.
`onOpen`	`() => void` Callback fired when the select is opened.
`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`
`values`	`SelectOption[]` The options to be displayed in the select dropdown.	`[]`
`theme`	`ResponsiveVariant<"base100" \| "secondary500">` The colourway applied to this component.	`base100`
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`validate`	`FieldValidator \| undefined` An optional field level validation function. See Formik docs for more details