# Select
The 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.
## Installation
```sh
yarn add @chakra-ui/select
# or
npm i @chakra-ui/select
```
## Import component
```jsx
import { Select } from "@chakra-ui/select"
```
## Usage
```jsx
```
## States
### Disabled
Pass the `isDisabled` prop to put the select component in an invalid state
```jsx
```
### Invalid
Pass the `isInvalid` prop to put the select component in an invalid state
```jsx
```
## Variants
Control the visual appearance of the select component by passing the `variant`
prop.
The following values are allowed: **outline, filled, flushed, unstyled**
```jsx
```
## Sizes
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) => (
))}
```
## Controlled Select
```tsx
const ControlledSelectExample = () => {
const [value, setValue] = React.useState("")
const handleChange = (event: React.ChangeEvent) => {
setValue(event.target.value)
}
return (
)
}
```
## Changing the icon in the 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 = () => (
)
return
}
```
## Focus border color and error border color
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
```
## Overriding the Select styles
Even though the select comes with predefined styles, you can override pretty
much any property. Here's we'll override the background color.
```jsx
```