The visual color appearance of the component
Select
Select component is a component that allows users pick a value from predefined options.
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#
The Select components is used when there are more than 5 options for users to pick from, otherwise consider using a radio group instead.
Here is 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#
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#
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#
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#
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
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
errorBorderColor
errorBorderColor
The border color when the select is invalid. Use color keys in `theme.colors`
string
focusBorderColor
focusBorderColor
The border color when the select is focused. Use color keys in `theme.colors`
string
icon
icon
The icon element to use in the select
ReactElement<any, string | JSXElementConstructor<any>>
iconColor
iconColor
The color of the icon
string
iconSize
iconSize
The size (width and height) of the icon
string
isDisabled
isDisabled
boolean
false
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
false
isReadOnly
isReadOnly
If true
, the form control will be readonly
boolean
false
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
false
rootProps
rootProps
Props to forward to the root div
element
RootProps
size
size
The size of the Select
"lg" | "md" | "sm" | "xs"
md
variant
variant
The variant of the Select
"outline" | "filled" | "flushed" | "unstyled"
outline
The Select
component is a multipart component. The styling needs to be applied
to each part specifically.
To learn more about styling multipart components, visit the Component Style page.
Anatomy#
- A:
field
- B:
icon
Theming properties#
The properties that affect the theming of the Select
component are:
variant
: The visual variant of the button. Defaults tooutline
.size
: The size of the button. Defaults tomd
.
Theming utilities#
createMultiStyleConfigHelpers
: a function that returns a set of utilities for creating style configs for a multipart component (definePartsStyle
anddefineMultiStyleConfig
).definePartsStyle
: a function used to create multipart style objects.defineMultiStyleConfig
: a function used to define the style configuration for a multipart component.
import { selectAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(selectAnatomy.keys)
Customizing the default theme#
import { selectAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(selectAnatomy.keys)const baseStyle = definePartsStyle({// define the part you're going to stylefield: {background: 'blue.100',},icon: {color: 'blue.400',},})export const selectTheme = defineMultiStyleConfig({ baseStyle })
After customizing the select theme, we can import it in our theme file and add
it in the components
property:
import { extendTheme } from '@chakra-ui/react'import { selectTheme } from './components/select'export const theme = extendTheme({components: { Select: selectTheme },})
This is a crucial step to make sure that any changes that we make to the select theme are applied.
Adding a custom size#
Let's assume we want to create a select with a custom size. Here's how we can do that:
import { selectAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(selectAnatomy.keys)const xl = defineStyle({fontSize: 'lg',px: '4',h: '12',})const sizes = {xl: definePartsStyle({ field: xl, icon: xl }),}export const selectTheme = defineMultiStyleConfig({ sizes })// Now we can use the new `xl` size<Select size="xl" ... />
Every time you're adding anything new to the theme, you'd need to run the CLI command to get proper autocomplete in your IDE. You can learn more about the CLI tool here.
Adding a custom variant#
Let's assume we want to create a custom variant of the select component. Here's how to do that:
import { selectAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'const { definePartsStyle, defineMultiStyleConfig } =createMultiStyleConfigHelpers(selectAnatomy.keys)const brandPrimary = definePartsStyle({field: {background: "purple.100",border: "1px dashed",borderColor: "purple.200",borderRadius: "full"},icon: {color: "purple.400"}})export const selectTheme = defineMultiStyleConfig({variants: { brandPrimary },})// Now we can use the new `brandPrimary` variant<Select variant="brandPrimary" ... />
Changing the default properties#
Let's assume we want to change the default size and variant of every select in our application. Here's how we can do that:
import { selectAnatomy } from '@chakra-ui/anatomy'import { createMultiStyleConfigHelpers, defineStyle } from '@chakra-ui/react'const { defineMultiStyleConfig } = createMultiStyleConfigHelpers(selectAnatomy.keys,)export const selectTheme = defineMultiStyleConfig({defaultProps: {size: 'xl',variant: 'brandPrimary',},})// This saves you time, instead of manually setting the size and variant every time you use a select:<Select size="xl" variant="pill" ... />
Showcase#
import { Box, IconButton, Select, SimpleGrid, useColorMode, Text } from "@chakra-ui/react"; import { FaMoon, FaSun } from "react-icons/fa"; import { MdArrowDropDown } from "react-icons/md"; export default function App() { const { toggleColorMode, colorMode } = useColorMode(); return ( <Box position="relative" h="100vh"> <SimpleGrid gap={12} p={12} columns={2}> <Select variant="outline" placeholder="Themed outline select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </Select> <Select icon={<MdArrowDropDown />} variant="filled" placeholder="Themed filled select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </Select> <Select variant="flushed" placeholder="Themed flushed select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </Select> <Select variant="brandPrimary" placeholder="Custom variant select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </Select> </SimpleGrid> <IconButton aria-label="toggle theme" rounded="full" size="xs" position="absolute" bottom={4} left={4} onClick={toggleColorMode} icon={colorMode === "dark" ? <FaSun /> : <FaMoon />} /> </Box> ); }