---
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.
route: /forms/select/
other_frameworks: select
---

## Default

<ExampleSnippet component="FormSelectExample" componentName="React Form Select" />

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.

<ExampleSnippet component="FormSelectSizingExample" componentName="React Form Select" />

The `multiple` attribute is also supported:

<ExampleSnippet component="FormSelectSizing2Example" componentName="React Form Select" />

As is the `htmlSize` property:

<ExampleSnippet component="FormSelectSizing3Example" componentName="React Form Select" />

## Disabled

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

<ExampleSnippet component="FormSelectDisabledExample" componentName="React Form Select" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CFormSelect /&gt;](./api/#cformselect)
- [&lt;CFormFeedback /&gt;](./api/#cformfeedback)
- [&lt;CFormLabel /&gt;](./api/#cformlabel)
- [&lt;CFormText /&gt;](./api/#cformtext)
