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.
There are three sizes of select : large (48px), default (40px) and small (32px).
Just like the input component, select comes in 3 variants,
flushed , and
filled. Pass the
variant prop and set it to either of
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's 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:
|The visual size of the |
|The icon to use in place if the |
|The visual size of the default icon|
|The color of the default icon|
|The variant of the select style to use.|
|The border color when the select is focused.|
|The border color when |
|The props to pass to the wrapper of the select. The select is wrapped in a |