Select

The Select component allows users to pick a value from a list of options.

Import

import { Select } from '@backyard-ui/core';

Used to group multiple items. Use in conjunction with Select.Label to ensure good accessibility via automatic labelling.

Use the isDisabled prop to disable an option.

To add a label or status message to your fields use the FormControl utility.

children required
Description The children elements
Type
ReactNode
size
Description The input size.
Type
"xs" | "sm" | "md"
Default
sm
isDisabled
Description Set the form element to disabled
Type
boolean
isInvalid
Description Set the form element `aria-invalid` to `true`
Type
boolean
isReadOnly
Description Set the form element to readonly
Type
boolean
isRequired
Description Set the form element `aria-required` to `true`
Type
boolean
isOpen
Description If `true` the Dialog will be initially opened
Type
boolean
Default
false