Color Schemes for Select
are not implemented in the default theme. You can extend the theme to implement them.
Select
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.
Import#
import { Select } from '@chakra-ui/react'
Usage#
Here's a basic usage of the Select
component.
<Select placeholder='Select option'><option value='option1'>Option 1</option><option value='option2'>Option 2</option><option value='option3'>Option 3</option></Select>
Changing the size of the Select#
The Select
component comes in four sizes. The default is md
.
xs
(24px
)sm
(32px
)md
(40px
)lg
(48px
)
<Stack spacing={3}><Select placeholder='extra small size' size='xs' /><Select placeholder='small size' size='sm' /><Select placeholder='medium size' size='md' /><Select placeholder='large size' size='lg' /></Stack>
Changing the appearance of the Select#
Just like the input component, Select
comes in 4 variants, outline
,
unstyled
, flushed
, and filled
. Pass the variant
prop and set it to
either of these values.
<Stack spacing={3}><Select variant='outline' placeholder='Outline' /><Select variant='filled' placeholder='Filled' /><Select variant='flushed' placeholder='Flushed' /><Select variant='unstyled' placeholder='Unstyled' /></Stack>
Changing the icon in the Select#
As with most Chakra components, you can change the arrow icon used in the
select. Simply pass the icon
prop.
In case the custom icon size doesn't look right, you can pass the iconSize
prop to change it.
<Select icon={<MdArrowDropDown />} placeholder='Woohoo! A new icon' />
Overriding the styles of the Select#
Even though the select comes with predefined styles, you can override pretty much any property. Here we'll override the background color.
<Selectbg='tomato'borderColor='tomato'color='white'placeholder='Woohoo! A new background color!'/>
Props#
The Select component composes Box so you can pass
all Box
props, and native Select
props in addition to these:
colorScheme
colorScheme
(string & {})
errorBorderColor
errorBorderColor
The border color when the select is invalid. Use color keys in `theme.colors` @example errorBorderColor = "red.500"
string
focusBorderColor
focusBorderColor
The border color when the select is focused. Use color keys in `theme.colors` @example focusBorderColor = "blue.500"
string
icon
icon
The icon element to use in the select
React.ReactElement
iconColor
iconColor
The color of the icon
string
iconSize
iconSize
The size (width and height) of the icon
string
isDisabled
isDisabled
boolean
isFullWidth
isFullWidth
If true
, the select element will span the full width of its parent
@deprecated This component defaults to 100% width,
please use the props maxWidth
or width
to configure
boolean
isInvalid
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
boolean
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
isRequired
isRequired
If true
, the form control will be required. This has 2 side effects:
- The FormLabel
will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true
boolean
rootProps
rootProps
Props to forward to the root div
element
RootProps
size
size
"lg" | "md" | "sm" | "xs"
"md"
variant
variant
"outline" | "filled" | "flushed" | "unstyled"
"outline"