---
id: select
category: form
title: Select
package: '@chakra-ui/select'
description:
  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.

<carbon-ad></carbon-ad>

## Import

```js
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.

```jsx
<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`)

```jsx
<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.

```jsx
<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.

```jsx
<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.

```jsx
<Select
  bg='tomato'
  borderColor='tomato'
  color='white'
  placeholder='Woohoo! A new background color!'
/>
```