Select component is a component that allows users pick a value from predefined
options. Ideally, it should be used when there are more than 5 options,
otherwise you might consider using a radio group instead.
Here's a basic usage of the
Select component cones in three sizes : large (48px), default (40px) and
Just like the input component,
Select comes in 3 variants,
flushed , and
filled. Pass the
variant prop and set it to
either of these values.
As with most Chakra components, you can change the arrow icon used in the
select. Simply pass the
In case the custom icon size doesn't look right, you can pass the
prop to change it.
Even though the select comes with predefined styles, you can override pretty much any property. Here we'll override the background color.
The Select component composes Box so you can pass all
props, and native
Select props in addition to these:
|css||The emotion's css style object||-|
|errorBorderColor||The border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"||-|
|focusBorderColor||The border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"||-|
|icon||The icon element to use in the select||-|
|iconColor||The color of the icon||-|
|iconSize||The size (width and height) of the icon||-|
|isFullWidth||If `true`, the select element will span the full width of its parent||-|
|isInvalid||If `true`, the form control will be invalid. This has 2 side effects: - The `FormLabel` and `FormErrorIcon` will have `data-invalid` set to `true` - The form element (e.g, Input) will have `aria-invalid` set to `true`||-|
|isLoading||If `true`, the form control will be in its `loading` state||-|
|isReadOnly||If `true`, the form control will be readonly||-|
|isRequired||If `true`, the form control will required. This has 2 side effects: - The `FormLabel` will show a required indicator - The form element (e.g, Input) will have `aria-requred` set to `true`||-|
|rootProps||Props to forward to the root `div` element||-|