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.
Checkbox buttons have to be wrapped in a <label>
with a .form-checkbox
class 👇
<!-- Single checkbox button --><label class="form-checkbox"><input type="checkbox" name="red">Red</label><!-- Multiple checkbox buttons --><div><label class="form-checkbox"><input type="checkbox" name="yellow">Yellow</label></div><div><label class="form-checkbox"><input type="checkbox" name="blue">Blue</label></div><!-- Multiple inline checkbox buttons --><span><label class="form-checkbox"><input type="checkbox" name="green">Green</label></span><span class="ml-16"><label class="form-checkbox"><input type="checkbox" name="purple">Purple</label></span>
For React and Vue templates we have provided a checkbox component to be used as in the example below.
// Single checkbox button<Checkbox name="red">Red</Checkbox>// Multiple checkbox buttons<div><Checkbox name="yellow">Yellow</Checkbox></div><div><Checkbox name="blue">Blue</Checkbox></div>// Multiple inline checkbox buttons<span><Checkbox name="green">Green</Checkbox></span><span className="ml-16"><Checkbox name="purple">Purple</Checkbox></span>
// Single checkbox button<c-checkbox name="red">Red</c-checkbox>// Multiple checkbox buttons<div><c-checkbox name="yellow">Yellow</c-checkbox></div><div><c-checkbox name="blue">Blue</c-checkbox></div>// Multiple inline checkbox buttons<span><c-checkbox name="green">Green</c-checkbox></span><span className="ml-16"><c-checkbox name="purple">Purple</c-checkbox></span>
Class | Description |
| Required to make a checkbox fit the template style |
Prop | Type | Default | Accepted values |
| string | - | - |
| string | - | - |
| boolean |
| - |
| boolean |
| - |
| boolean |
| - |
Prop | Type | Default | Accepted values |
| string | - | - |
| string | - | - |
| boolean |
| - |
| boolean |
| - |
| boolean |
| - |
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.