Select

Use the .form-select class on <select> tags to make them fit the template style 👇

<label class="form-label" for="color">Pick a color</label>
<select class="form-select" id="color">
    <option hidden>Choose your favourite</option>
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>
</select>

In our React and Vue templates we have provided a select component to be used as in the example below.

<Select id="color" label="Pick a color" placeholder="Choose your favourite">
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</Select>

<c-select id="color" label="Pick a color" placeholder="Choose your favourite">
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</c-select>

Colors

A selected element has success, warning and error states. Check out the input and textarea colors chapter to learn more.

<select class="form-select form-success">
    <option hidden>Choose your favourite</option>
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>
</select>
<select class="form-select form-warning">
    <option hidden>Choose your favourite</option>
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>
</select>
<select class="form-select form-error">
    <option hidden>Choose your favourite</option>
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>
</select>

In React and Vue you can use the status prop instead 👇

<Select status="success">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</Select>
<Select status="warning">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</Select>
<Select status="error">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</Select>

<c-select status="success">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</c-select>
<c-select status="warning">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</c-select>
<c-select status="error">
  <option hidden>Choose your favourite</option>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>
</c-select>

Sizes

Select tag comes in 2 sizes. Add a .form-select-sm class to make it look smaller.

<select class="form-select form-select-sm">
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>
</select>

Use the size prop in React and Vue 👇

<Select size="sm">
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</Select>

<c-select size="sm">
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</c-select>

Disabled state

To prevent users from interacting with a select, just use the disabled HTML attribute.

<select class="form-select" disabled>
    <option>Red</option>
    <option>Yellow</option>
    <option>Blue</option>  
</select>

It will be passed as a prop in React and Vue.

<Select disabled>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</Select>

<c-select disabled>
  <option>Red</option>
  <option>Yellow</option>
  <option>Blue</option>    
</c-select>

TL;DR

List of available HTML classes

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/elements/_forms.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/elements/_buttons-and-forms.scss
👆 Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/elements/_forms.scss
👆 Use this to add custom CSS