Replace the default checkbox of the browser by a more user friendly version.
Overview
Use them as a replacement for the default checkbox in your forms.
Usage
Dependencies
To get the checkbox component working, include the dependencies in your project in the following order:
"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"
@import 'design-system/src/scss/01-atoms/checkbox';
include /node_modules/design-system/src/pug/01-atoms/checkbox
import Checkbox from 'design-system/src/js/01-atoms/checkbox';
Basic code
A checkbox is composed by a
label
containing an hidden
input
which has the
type="checkbox"
and a
tabindex="-1"
to avoid the focus possibility. It contains also 2
span, one used to emulate the shape and the other the label.
<label class="checkbox" for="water">
<input class="checkbox__input" type="checkbox" tabindex="-1" id="water" name="drinks" value="water">
<span class="checkbox__shape" tabindex="0"></span>
<span class="checkbox__label">Water</span>
</label>
label.checkbox(for='water')
input#water.checkbox__input(type='checkbox', tabindex='-1', name='drinks', value='water')
span.checkbox__shape(tabindex='0')
span.checkbox__label Water
new Checkbox();
Pug mixin
A pug mixin is available to implement the checkbox with ease, find the parameters below:
+checkbox(label, id, name, value, disabled)
| # | Name | Default | Required | Description |
|---|---|---|---|---|
| 1 | label |
/ | Yes | Set the label of the checkbox. |
| 2 | id |
/ | Yes | Set the
id
attribute of the checkbox.
|
| 3 | name |
/ | Yes | Set the
name
attribute the checkbox.
|
| 4 | value |
/ | Yes | Set the
value
attribute of the the checkbox.
|
| 5 | disabled |
'false' |
No | Specify if the checkbox should be disabled by setting this parameter to
'true'
.
|
Modifiers
Add the following modifier to change the appearance of the checkbox.
Disabled
Disable the checkbox.