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.
Changing the size of the Select#
There are three sizes of select : large (40px), default (32px) and small (24px).
Changing the appearance of the Select#
Just like the input component, select comes in 3 variants,
flushed , and
filled. Pass the
variant prop and set it to either of
Changing the icon in the Select#
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.
🚨 This feature works in v0.5.1. Kindly upgrade if you need it
Overriding the styles of the Select#
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 PseudoBox so you can pass all
PseudoBox props, and
|The visual size of the |
|The icon to use in place if the |
|The visual size of the 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 |
Proudly made in 🇳🇬
Released under the MIT License.
Copyright © 2019 Segun Adebayo