✨ Get all templates and new upcoming releases for just $69. Limited time offer ✨

Select

Cruip CSS

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

Select dropdown

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

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

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

Disabled select

<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

Class Description
.form-select Required to make a select fit the template style
.form-success .form-warning .form-error To make them look different accordingly to their current state
.form-select-sm To make them smaller

React props

Prop Type Default Accepted values
label string
labelHidden boolean false
name string undefined
id string null
status string success, warning, error
disabled boolean false
required boolean false
value string, number undefined
size string sm
placeholder string
hint string null

Vue props

Prop Type Default Accepted values
label string
label-hidden boolean false
name string
id string null
status string success, warning, error
disabled boolean false
required boolean false
value string, number
size string sm
placeholder string
hint string null

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

Learn more about the Sass logic behind each template.
Last updated on August 17, 2021