Input check
Radio, checkboxes and different styles for them.
File to include
@import "components/input-check";
Radio
<div class="radio">
<input type="radio" id="radio-1" name="demo-radio">
<label for="radio-1">Radio</label>
</div>
<div class="radio">
<input type="radio" id="radio-2" name="demo-radio" checked>
<label for="radio-2">Radio</label>
</div>
<div class="radio" data-validate="not-passed">
<input type="radio" id="radio-3" name="demo-radio-validation">
<label for="radio-3">Radio</label>
</div>
<div class="radio" data-validate="not-passed">
<input type="radio" id="radio-4" name="demo-radio-validation" checked>
<label for="radio-4">Radio</label>
</div>
<div class="radio">
<input type="radio" id="radio-5" name="demo-radio-disabled" disabled>
<label for="radio-5">Radio</label>
</div>
<div class="radio">
<input type="radio" id="radio-6" name="demo-radio-disabled" checked disabled>
<label for="radio-6">Radio</label>
</div>
Checkbox
<div class="checkbox">
<input type="checkbox" id="checkbox-1" name="demo-checkbox">
<label for="checkbox-1">Checkbox</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-2" name="demo-checkbox" checked>
<label for="checkbox-2">Checkbox</label>
</div>
<div class="checkbox" data-validate="not-passed">
<input type="checkbox" id="checkbox-3" name="demo-checkbox-validation">
<label for="checkbox-3">Checkbox</label>
</div>
<div class="checkbox" data-validate="not-passed">
<input type="checkbox" id="checkbox-4" name="demo-checkbox-validation" checked>
<label for="checkbox-4">Checkbox</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-5" name="demo-checkbox-disabled" disabled>
<label for="checkbox-5">Checkbox</label>
</div>
<div class="checkbox">
<input type="checkbox" id="checkbox-6" name="demo-checkbox-disabled" checked disabled>
<label for="checkbox-6">Checkbox</label>
</div>
Radio tile
<div class="radio tile">
<input type="radio" id="radio-tile-1" name="demo-radio-tile">
<label for="radio-tile-1">Radio</label>
</div>
<div class="radio tile">
<input type="radio" id="radio-tile-2" name="demo-radio-tile" checked>
<label for="radio-tile-2">Radio</label>
</div>
<div class="radio tile" data-validate="not-passed">
<input type="radio" id="radio-tile-3" name="demo-radio-tile-validation">
<label for="radio-tile-3">Radio</label>
</div>
<div class="radio tile" data-validate="not-passed">
<input type="radio" id="radio-tile-4" name="demo-radio-tile-validation" checked>
<label for="radio-tile-4">Radio</label>
</div>
<div class="radio tile">
<input type="radio" id="radio-tile-5" name="demo-radio-tile-disabled" disabled>
<label for="radio-tile-5">Radio</label>
</div>
<div class="radio tile">
<input type="radio" id="radio-tile-6" name="demo-radio-tile-disabled" checked disabled>
<label for="radio-tile-6">Radio</label>
</div>
Checkbox tile
<div class="checkbox tile">
<input type="checkbox" id="checkbox-tile-1" name="demo-checkbox-tile">
<label for="checkbox-tile-1">Checkbox</label>
</div>
<div class="checkbox tile">
<input type="checkbox" id="checkbox-tile-2" name="demo-checkbox-tile" checked>
<label for="checkbox-tile-2">Checkbox</label>
</div>
<div class="checkbox tile" data-validate="not-passed">
<input type="checkbox" id="checkbox-tile-3" name="demo-checkbox-tile-validation">
<label for="checkbox-tile-3">Checkbox</label>
</div>
<div class="checkbox tile" data-validate="not-passed">
<input type="checkbox" id="checkbox-tile-4" name="demo-checkbox-tile-validation" checked>
<label for="checkbox-tile-4">Checkbox</label>
</div>
<div class="checkbox tile">
<input type="checkbox" id="checkbox-tile-5" name="demo-checkbox-tile-disabled" disabled>
<label for="checkbox-tile-5">Checkbox</label>
</div>
<div class="checkbox tile">
<input type="checkbox" id="checkbox-tile-6" name="demo-checkbox-tile-disabled" checked disabled>
<label for="checkbox-tile-6">Checkbox</label>
</div>
Toggle
<div class="toggle">
<input type="checkbox" id="toggle-1" name="demo-toggle">
<label for="toggle-1">Toggle</label>
</div>
<div class="toggle">
<input type="checkbox" id="toggle-2" name="demo-toggle" checked>
<label for="toggle-2">Toggle</label>
</div>
<div class="toggle" data-validate="not-passed">
<input type="checkbox" id="toggle-3" name="demo-toggle-validation">
<label for="toggle-3">Toggle</label>
</div>
<div class="toggle" data-validate="not-passed">
<input type="checkbox" id="toggle-4" name="demo-toggle-validation" checked>
<label for="toggle-4">Toggle</label>
</div>
<div class="toggle">
<input type="checkbox" id="toggle-5" name="demo-toggle-disabled" disabled>
<label for="toggle-5">Toggle</label>
</div>
<div class="toggle">
<input type="checkbox" id="toggle-6" name="demo-toggle-disabled" checked disabled>
<label for="toggle-6">Toggle</label>
</div>
Selector
<div class="selector">
<input type="checkbox" id="selector-1" name="demo-selector">
<label for="selector-1">Selector</label>
</div>
<div class="selector">
<input type="checkbox" id="selector-2" name="demo-selector" checked>
<label for="selector-2">Selector</label>
</div>
<div class="selector">
<input type="checkbox" id="selector-5" name="demo-selector-disabled" disabled>
<label for="selector-5">Selector</label>
</div>
<div class="selector">
<input type="checkbox" id="selector-6" name="demo-selector-disabled" checked disabled>
<label for="selector-6">Selector</label>
</div>
Attributes
Name | Example value | Possible values | Default | Required |
---|---|---|---|---|
data-validate | passed | "not-passed" | "passed" | None | No |