Go one step further with our solutions for creating an intuitive, personalized experience.
The Checkbox and Switch components are used to check/uncheck an option.
Using the h_checkbox class creates a Checkbox component. The data-label attribute creates a label that will accompany the checkboxes.
<input class="h_checkbox" type="checkbox" checked>
<input class="h_checkbox" data-label="My label" type="checkbox" checked>
Several variations of this component are possible using the accent and danger classes, as well as the disabled attribute.
<input class="h_checkbox accent" data-label="My label" type="checkbox">
<input class="h_checkbox danger" data-label="My label" type="checkbox">
<input class="h_checkbox" data-label="My label" type="checkbox" disabled>
Setting up a global Checkbox will help the user in the case of a total selection of Checkboxes.
To do so, include all your Checkbox components in an HTML tag with the h_group-checkbox class.
Add a label to it with data-label.
Vary the styles with the accent and danger classes.
<div class="h_group-checkbox" data-label="Global label">
<input class="h_checkbox" data-label="label 1" type="checkbox" checked>
<input class="h_checkbox danger" data-label="label 2" type="checkbox">
</div>
<div class="h_group-checkbox accent" data-label="Global label">
<input class="h_checkbox accent" data-label="1" type="checkbox" checked>
<input class="h_checkbox" data-label="2" type="checkbox" checked>
</div>
<div class="h_group-checkbox danger" data-label="Global label">
<input class="h_checkbox danger" data-label="label" type="checkbox" checked>
</div>
By adding the switch class, the Checkbox components will change their appearance.
<input class="h_checkbox switch" type="checkbox">
<input class="h_checkbox switch" data-label="label" type="checkbox">
<input class="h_checkbox switch" data-label="label" type="checkbox" checked>
<input class="h_checkbox switch accent" data-label="label" type="checkbox" checked>
<input class="h_checkbox switch danger" data-label="label" type="checkbox" checked>
<div class="h_group-checkbox" data-label="Global label">
<input class="h_checkbox switch" data-label="label 1" type="checkbox" checked>
<input class="h_checkbox switch danger" data-label="label 2" type="checkbox">
<input class="h_checkbox switch" disabled data-label="label 2" type="checkbox">
</div>
<div class="h_group-checkbox danger switch" data-label="Global label">
<input class="h_checkbox accent switch" data-label="label" type="checkbox" checked>
</div>
<input class="h_checkbox accent" data-label="My label" type="checkbox">
<input class="h_checkbox danger" data-label="My label" type="checkbox">
<input class="h_checkbox" data-label="My label" type="checkbox" disabled>
<div class="h_group-checkbox" data-label="Global label">
<input class="h_checkbox" data-label="label 1" type="checkbox" checked>
<input class="h_checkbox danger" data-label="label 2" type="checkbox">
</div>
<div class="h_group-checkbox accent" data-label="Global label">
<input class="h_checkbox accent" data-label="1" type="checkbox" checked>
<input class="h_checkbox" data-label="2" type="checkbox" checked>
</div>
<div class="h_group-checkbox danger" data-label="Global label">
<input class="h_checkbox danger" data-label="label" type="checkbox" checked>
</div>
<input class="h_checkbox switch" type="checkbox">
<input class="h_checkbox switch" data-label="label" type="checkbox">
<input class="h_checkbox switch" data-label="label" type="checkbox" checked>
<input class="h_checkbox switch accent" data-label="label" type="checkbox" checked>
<input class="h_checkbox switch danger" data-label="label" type="checkbox" checked>
<div class="h_group-checkbox" data-label="Global label">
<input class="h_checkbox switch" data-label="label 1" type="checkbox" checked>
<input class="h_checkbox switch danger" data-label="label 2" type="checkbox">
<input class="h_checkbox switch" disabled data-label="label 2" type="checkbox">
</div>
<div class="h_group-checkbox danger switch" data-label="Global label">
<input class="h_checkbox accent switch" data-label="label" type="checkbox" checked>
</div>
| Attributes | Definition |
|---|---|
| data-label | Create a checkbox label. |
| Class | Definition |
|---|---|
| h_checkbox | Create a checkbox. |
| switch | Change the style for a switch. |
| primary | Primary checkbox. |
| accent | Accent checkbox. |
| danger | Danger checkbox. |
| h_group-checkbox | Create a group of checkbox. |
Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!
Cookie settings