---
title: React Select Component
name: Select
description: React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.
menu: Forms
route: /forms/select
other_frameworks: select
---

import {
  CButton,
  CForm,
  CFormCheck,
  CFormLabel,
  CFormSelect,
  CFormText,
  CCol,
  CRow,
} from '@coreui/react/src/index'

## Default

```jsx preview
<CFormSelect 
  aria-label="Default select example"
  options={[
    'Open this select menu',
    { label: 'One', value: '1' },
    { label: 'Two', value: '2' },
    { label: 'Three', value: '3', disabled: true }
  ]}
/>
```
You can also add options manually

```jsx 
<CFormSelect aria-label="Default select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" disabled>Three</option>
</CFormSelect>
```

## Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

```jsx preview
<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
```

The `multiple` attribute is also supported:

```jsx preview
<CFormSelect size="lg" multiple aria-label="Multiple select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
```

As is the `htmlSize` property:

```jsx preview
<CFormSelect htmlSize={3} multiple aria-label="size 3 select example">
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
```

## Disabled

Add the `disabled` boolean attribute on a select to give it a grayed out appearance and remove pointer events.

```jsx preview
<CFormSelect aria-label="Disabled select example" disabled>
  <option>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</CFormSelect>
```

## Customizing

### SASS variables

<ScssDocs file="_variables.scss" capture="form-select-variables" />

## API

### CFormSelect

`markdown:CFormSelect.api.mdx`
