Select

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.