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. 

Basic elements - Previous

Input and textarea

Next - Basic elements

Checkbox

Last updated 8 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