Select

This component allows the user to select from suggested options.

Basic Usage


import { Select } from '@krakentech/coral';
 
<Select
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

Properties

value


const [selectedValue, setSelectedValue] = useState<SelectOption | null>({
    value: 20,
    label: 'Twenty',
});
 
const onChange = (value: SelectOption | null | undefined) => {
    setSelectedValue(value ?? null);
};
 
<Select
    value={selectedValue}
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' }
    ]}
    onChange={onChange}
/>
 
<Button onClick={() => setSelectedValue({
    value: 30,
    label: 'Thirty',
})}>
    Change value
</Button>

Label

defaultOpen


<Select
    defaultOpen
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

defaultValue


<Select
    defaultValue={{ value: 30, label: 'Thirty' }}
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

disabled


<Select
    disabled
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

error / errorMessage


<Select
    error
    errorMessage="Please select a value"
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

Please select a value

label


<Select
    label="Select a number"
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Select a number

optional


<Select
    optional
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label (optional)

Theme


<Select
    theme="secondary500"
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
/>

Label

ReactNode labels

It is possible to pass in React Nodes as the label like below, to add icons for example. Wrapping these in a Stack ensures they are aligned correctly. We are unable to change the typing on this component due to the package we use for our Select but you can use a // @ts-expect-error comment in these instances to get rid of the type error.


<Select
    values={[
        {
            value: 'electricity',
            label: (
                <>
                    <Stack direction="horizontal" alignItems="center">
                        <IconElectricity /> Electricity
                    </Stack>
                </>
            ),
        },
        {
            value: 'gas',
            label: (
                <>
                    <Stack direction="horizontal" alignItems="center">
                        <IconGas /> Gas
                    </Stack>
                </>
            ),
        },
    ]}
/>

Label

Event Handling


<Select
    onChange={(selectValue) => {}}
    onBlur={() => {}}
    onOpen={() => {}}
    onClose={() => {}}
    ...
/>

Responsive


<Select
    values={[
        { value: 10, label: 'Ten' },
        { value: 20, label: 'Twenty' },
        { value: 30, label: 'Thirty' },
    ]}
    theme={{ base: "base100", lg: "secondary500" }}
/>

Label

Full API

Name	Type	Default
`defaultOpen`	`boolean` If `true`, the component will be open by default.	`false`
`defaultValue`	`SelectOption \| null` The default value to be selected when the component is first rendered.	`null`
`disabled`	`boolean` If `true`, the component will be disabled and not respond to user interactions.	`false`
`error`	`boolean` If `true`, the component will have error styling set.	`false`
`errorMessage`	`string` If set, the `ErrorMessage` component will be rendered below the input with this text.	`Please select an option`
`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`
`value`	`SelectOption \| null` `value` should be supplied by the parent component to control the value of the Select input.
`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' };`