✨ Welcome Summer Sale! Get all templates for $79 (40% Off) ✨
Cruip CSS

Select

Effective on March 1st, 2023, Cruip CSS templates are no longer distributed, maintained or supported.

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

ClassDescription
.form-selectRequired to make a select fit the template style
.form-success .form-warning .form-errorTo make them look different accordingly to their current state
.form-select-smTo make them smaller

React props

PropTypeDefaultAccepted values
labelstring
labelHiddenbooleanfalse
namestringundefined
idstringnull
statusstringsuccess, warning, error
disabledbooleanfalse
requiredbooleanfalse
valuestring, numberundefined
sizestringsm
placeholderstring
hintstringnull

Vue props

PropTypeDefaultAccepted values
labelstring
label-hiddenbooleanfalse
namestring
idstringnull
statusstringsuccess, warning, error
disabledbooleanfalse
requiredbooleanfalse
valuestring, number
sizestringsm
placeholderstring
hintstringnull

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