description
npm install @chakra-ui/selectThe 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.
``sh
yarn add @chakra-ui/select
npm i @chakra-ui/select
`
`jsx`
import { Select } from "@chakra-ui/select"
`jsx`
Pass the isDisabled prop to put the select component in an invalid state
`jsx`
Pass the isInvalid prop to put the select component in an invalid state
`jsx`
Control the visual appearance of the select component by passing the variant
prop.
The following values are allowed: outline, filled, flushed, unstyled
`jsx
`
Pass the size prop to change the size and height of the select component.
The following values are allowed: sm, md, lg
`jsx`
{["sm", "md", "lg"].map((size) => (
))}
`tsx
const ControlledSelectExample = () => {
const [value, setValue] = React.useState("")
const handleChange = (event: React.ChangeEvent
setValue(event.target.value)
}
return (
value={value}
onChange={handleChange}
placeholder="Controlled select"
>
)
}
`
Pass the icon prop to change the arrow icon of the select component to a
custom icon.
You also have access to the iconSize prop to change the size of the custom
arrow icon.
`jsx`
const CustomSelectIconExample = () => {
const SelectIcon = () => (
d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"
/>
)
return
}
Pass the focusBorderColor prop to change the border color of the select
component in the focused state.
Pass the errorBorderColor prop to change the border color of the select
component in the invalid state.
The value of these props can be set to a color in the theme object, or a raw CSS
value.
`jsx
isInvalid
errorBorderColor="crimson"
placeholder="Here is a sample placeholder"
/>
`
Even though the select comes with predefined styles, you can override pretty
much any property. Here's we'll override the background color.
`jsx``
color="white"
borderColor="tomato"
backgroundColor="tomato"
placeholder="Woohoo! A new background color!"
/>