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.
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.
<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>
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 👇
<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>
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 👇
<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>
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.
<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>
Class | Description |
| Required to make a select fit the template style |
| To make them look different accordingly to their current state |
| To make it smaller |
Prop | Type | Default | Accepted values |
| string | - | - |
| boolean |
| - |
| string |
| - |
| string |
| - |
| string | - |
|
| boolean |
| - |
| boolean |
| - |
| string, number | undefined | - |
| string | - |
|
| string | - | - |
| string |
| - |
Prop | Type | Default | Accepted values |
| string | - | - |
| boolean |
| - |
| string |
|
|
| string | - | - |
| string |
| - |
| string | - |
|
| boolean |
| - |
| boolean |
| - |
| string, number | - | - |
| string | - |
|
| string | - | - |
| string |
| - |
Style is defined into 3 files:
src/assets/scss/core/elements/_forms.scss
src/assets/scss/settings/elements/_buttons-and-forms.scss
👆Use this to adjust Sass variables
src/assets/scss/theme/elements/_forms.scss
👆Use this to add custom CSS
Learn more about the Sass logic behind each template.