We've updated our documenation to align with our other frameworks. Our new documenation will live here and these pages will be removed.
Selection controls allow users to make decisions via controls such as switches, radio buttons, and checkboxes.
Switches are built using <label>
with the class .switch to wrap around <input>
tag with the type checkbox, and <span>
tag with the class .slider
. Switches can be altered by using classes and attributes, here are some examples checked
or is-disabled
.
<label class="switch">
<input type="checkbox" />
<span class="slider"></span>
<span class="off label">Toggle off</span>
<span class="on label">Toggle on</span>
</label>
<br>
<label class="switch">
<input type="checkbox" checked="" />
<span class="slider"></span>
<span class="off label">Toggle off</span>
<span class="on label">Toggle on</span>
</label>
<br>
<label class="switch">
<input type="checkbox" disabled="" />
<span class="slider"></span>
<span class="label">Toggle disabled</span>
</label>
<br>
<label class="switch">
<input type="checkbox" checked="" disabled="" />
<span class="slider"></span>
<span class="label">Toggle disabled on</span>
</label>
Radio buttons are built by wrapping the <input>
tag with the type radio and <label>
tag in a div with the class .radio
. Radios can be altered by using classes and attributes, here are some examples checked
or is-disabled
.
<div class="radio">
<input type="radio" value="A" name="sample" id="radio-sample-a" />
<label for="radio-sample-a">Radio</label>
</div>
<br>
<div class="radio">
<input type="radio" value="B" name="sample" id="radio-sample-b" checked="" />
<label for="radio-sample-b">Radio</label>
</div>
<br>
<div class="radio">
<input type="radio" value="C" name="sample" id="radio-sample-c" disabled="" />
<label for="radio-sample-c">Radio disabled</label>
</div>
Checkboxes are built very similar to radios by wrapping the <input>
tag with the type checkbox and <label>
tag in a div with the class .checkbox
. Checkboxes can be altered by using classes and attributes, here are some examples checked
, is-disabled
, or data-partial
.
<div class="checkbox">
<input id="denali-checkbox-1" type="checkbox" value="value1" />
<label for="denali-checkbox-1">Checkbox</label>
</div>
<br>
<div class="checkbox">
<input id="denali-checkbox-2" type="checkbox" value="value1" checked="" />
<label for="denali-checkbox-2">Checkbox</label>
</div>
<br>
<div class="checkbox">
<input id="denali-checkbox-2" type="checkbox" value="value1" disabled="" />
<label for="denali-checkbox-2">Checkbox disabled</label>
</div>
<br>
<div class="checkbox">
<input id="denali-checkbox-5" type="checkbox" value="value1" data-partial="" />
<label for="denali-checkbox-5">Checkbox partially</label>
</div>
You can use these variables in a override.css
file to customize this component.
Variable Name | CSS Property |
---|---|
$checkbox-box-border-color-standard |
box-shadow |
$checkbox-box-border-color-hover |
box-shadow |
$checkbox-box-border-color-active |
box-shadow |
$checkbox-box-border-color-disabled |
box-shadow |
$checkbox-box-partial-color |
background |
$checkbox-box-bg-color-active |
background |
$checkbox-box-label-text-color |
color |
$checkbox-box-label-disabled-text-color |
color |
$checkbox-checkmark-color |
color |
$checkbox-corner-radius |
border-radius |
Variable Name | CSS Property |
---|---|
$radio-circle-border-standard |
box-shadow |
$radio-circle-border-hover |
box-shadow |
$radio-circle-border-active |
box-shadow |
$radio-circle-border-disabled |
box-shadow |
$radio-circle-bg-color-active |
background |
$radio-label-text-color |
color |
$radio-label-disabled-text-color |
color |
Variable Name | CSS Property |
---|---|
$switch-circle-border-color-standard |
border-color |
$switch-circle-border-color-hover |
border-color |
$switch-circle-border-color-active |
border-color |
$switch-circle-border-color-disabled |
border-color |
$switch-circle-bg-color-standard |
background |
$switch-circle-bg-color-active |
background |
$switch-circle-bg-color-disabled |
background |
$switch-circle-bg-color-active-disabled |
background |
$switch-slider-standard-color |
background |
$switch-slider-active-color |
background |
$switch-slider-disabled-color |
background |
$switch-label-text-color |
color |
$switch-label-disabled-text-color |
color |