React Select Component

Select

React select component. Customize the native `<select>`s with custom CSS that changes the element's initial appearance.

Available in Other JavaScript Frameworks

CoreUI React Select Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:

On this page

Default#

You can also add options manually

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

The multiple attribute is also supported:

As is the htmlSize property:

Disabled#

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

API#

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