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. 

Basic elements - Previous

Input and textarea

Next - Basic elements

Checkbox

Last updated 7 months ago

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

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

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