Select

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

General information

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.

React
Vue
React
<Select id="color" label="Pick a color" placeholder="Choose your favourite">
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</Select>
Vue
<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 👇

React
Vue
React
<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>
Vue
<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 👇

React
Vue
React
<Select size="sm">
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</Select>
Vue
<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.

React
Vue
React
<Select disabled>
<option>Red</option>
<option>Yellow</option>
<option>Blue</option>
</Select>
Vue
<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 it 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

-

type

string

text

  • Type attributes for input tags such as: text, email, password, number, and more.

  • textarea

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.