Cirrus

#Radio

Cirrus comes with a styled version of a radio button.

#Basics

By default, radio buttons in Cirrus come with very minimal styling.

<label><input type="radio" name="house" checked/> Starks</label>
<label><input type="radio" name="house" /> Lannisters</label>

#Stylized

Stylized checkboxes are animated and come with different variations. Since this is part of the extended controls styling, we use classes from the extended forms file which are prefixed with form-ext.

The structure of an extended radio button is as follows:

  • form-ext-control form-ext-radio
    • form-ext-input
    • form-ext-label
<div class="form-ext-control form-ext-radio">
    <input id="radio-1a" name="customRadio1" class="form-ext-input" type="radio">
    <label class="form-ext-label" for="radio-1a">Unselected</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-2a" name="customRadio1" class="form-ext-input" type="radio" checked>
    <label class="form-ext-label" for="radio-2a">Selected</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-3a" name="customRadio1" class="form-ext-input" type="radio">
    <label class="form-ext-label" for="radio-3a">Unselected</label>
</div>

For disabled forms, just add the disabled property.

<div class="form-ext-control form-ext-radio">
    <input id="radio-1b" name="customRadio2" class="form-ext-input" type="radio" disabled />
    <label class="form-ext-label" for="radio-1a">Unselected</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-2b" name="customRadio2" class="form-ext-input" type="radio" disabled checked />
    <label class="form-ext-label" for="radio-2a">Selected</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="radio-3b" name="customRadio2" class="form-ext-input" type="radio" disabled />
    <label class="form-ext-label" for="radio-3a">Unselected</label>
</div>

The existing variants for checkboxes consists of all the v1 colors.

<div class="form-ext-control form-ext-radio">
    <input id="check-dark" class="form-ext-input form-ext-input--dark" type="checkbox" checked />
    <label class="form-ext-label" for="check-dark">dark</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-primary" class="form-ext-input form-ext-input--primary" type="checkbox" checked />
    <label class="form-ext-label" for="check-primary">primary</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-link" class="form-ext-input form-ext-input--link" type="checkbox" checked />
    <label class="form-ext-label" for="check-link">link</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-info" class="form-ext-input form-ext-input--info" type="checkbox" checked />
    <label class="form-ext-label" for="check-info">info</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-success" class="form-ext-input form-ext-input--success" type="checkbox" checked />
    <label class="form-ext-label" for="check-success">success</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-warning" class="form-ext-input form-ext-input--warning" type="checkbox" checked />
    <label class="form-ext-label" for="check-warning">warning</label>
</div>
<div class="form-ext-control form-ext-radio">
    <input id="check-danger" class="form-ext-input form-ext-input--danger" type="checkbox" checked />
    <label class="form-ext-label" for="check-danger">danger</label>
</div>