Denali CSS Docs are Moving

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

Selection controls allow users to make decisions via controls such as switches, radio buttons, and checkboxes.


Switch

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

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>
 

Checkbox

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>
 

Variables

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
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