Checks and radios
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Approach
Browser default checkboxes and radios are replaced with the help of .form-check
, a series of classes for both input types that improves the layout and behavior of their HTML elements, that provide greater customization and cross browser consistency. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Structurally, our <input>
s and <label>
s are sibling elements as opposed to an <input>
within a <label>
. This is slightly more verbose as you must specify id
and for
attributes to relate the <input>
and <label>
. We use the sibling selector (~
) for all our <input>
states, like :checked
or :disabled
. When combined with the .form-check-label
class, we can easily style the text for each item based on the <input>
’s state.
Our checks use custom Boosted Innovation Cup icons to indicate checked or indeterminate states.
Checks
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
Indeterminate
Checkboxes can utilize the :indeterminate
pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate">
<label class="form-check-label" for="flexCheckIndeterminate">
Indeterminate checkbox
</label>
</div>
Disabled
Add the disabled
attribute and the associated <label>
s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
<label class="form-check-label" for="flexCheckIndeterminateDisabled">
Disabled indeterminate checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled" disabled>
<label class="form-check-label" for="flexCheckDisabled">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexCheckCheckedDisabled">
Disabled checked checkbox
</label>
</div>
Radios
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
<label class="form-check-label" for="flexRadioDefault2">
Default checked radio
</label>
</div>
Disabled
Add the disabled
attribute and the associated <label>
s are automatically styled to match with a lighter color to help indicate the input’s state.
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
<label class="form-check-label" for="flexRadioDisabled">
Disabled radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexRadioCheckedDisabled">
Disabled checked radio
</label>
</div>
Switches
A switch has the markup of a custom checkbox but uses the .form-switch
class to render a toggle switch. Consider using role="switch"
to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled
attribute.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
Default (stacked)
By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check
.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline
to any .form-check
.
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
Reverse
Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse
modifier class.
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck1">
<label class="form-check-label" for="reverseCheck1">
Reverse checkbox
</label>
</div>
<div class="form-check form-check-reverse">
<input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
<label class="form-check-label" for="reverseCheck2">
Disabled reverse checkbox
</label>
</div>
<div class="form-check form-switch form-check-reverse">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
<label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>
Without labels
Omit the wrapping .form-check
for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label
). See the forms overview accessibility section for details.
<div>
<input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>
<div>
<input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>
Toggle buttons
Create button-like checkboxes and radio buttons by using .btn
styles rather than .form-check-label
on the <label>
elements. These toggle buttons can further be grouped in a button group if needed.
Checkbox toggle buttons
<input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
<label class="btn btn-primary" for="btn-check">Single toggle</label>
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off">
<label class="btn btn-primary" for="btn-check-2">Checked</label>
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
Radio toggle buttons
Boosted Innovation Cup requires to group its radio toggle buttons in a button group to display properly.
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked>
<label class="btn btn-secondary" for="option1">Checked</label>
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off">
<label class="btn btn-secondary" for="option2">Radio</label>
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>
<input type="radio" class="btn-check" name="options" id="option4" autocomplete="off">
<label class="btn btn-secondary" for="option4">Radio</label>
</div>
With icon
Add .btn-icon
with an embedded icon to get consistent squared icon buttons working as toggle.
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="icons" id="option5" autocomplete="off" checked>
<label class="btn btn-icon" for="option5">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#day"/>
</svg>
<span class="visually-hidden">Day</span>
</label>
<input type="radio" class="btn-check" name="icons" id="option6" autocomplete="off">
<label class="btn btn-icon" for="option6">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#week"/>
</svg>
<span class="visually-hidden">Week</span>
</label>
<input type="radio" class="btn-check" name="icons" id="option7" autocomplete="off">
<label class="btn btn-icon" for="option7">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#month"/>
</svg>
<span class="visually-hidden">Month</span>
</label>
</div>
Drop borders using .btn-no-outline
, too.
<div class="btn-group" role="group">
<input type="radio" class="btn-check" name="icons" id="option8" autocomplete="off" checked>
<label class="btn btn-icon btn-no-outline" for="option8">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#day"/>
</svg>
<span class="visually-hidden">Day</span>
</label>
<input type="radio" class="btn-check" name="icons" id="option9" autocomplete="off">
<label class="btn btn-icon btn-no-outline" for="option9">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#week"/>
</svg>
<span class="visually-hidden">Week</span>
</label>
<input type="radio" class="btn-check" name="icons" id="option10" autocomplete="off">
<label class="btn btn-icon btn-no-outline" for="option10">
<svg width="1.25rem" height="1.25rem" fill="currentColor">
<use xlink:href="/innovation-cup/docs/0.2/assets/img/boosted-sprite.svg#month"/>
</svg>
<span class="visually-hidden">Month</span>
</label>
</div>
Star rating
Star rating system is built on top of radios. Simply add .star-rating
to a <fieldset>
element to use predefined glyphs and compose your star rating system with as much stars as needed.
<form>
<fieldset class="star-rating">
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible" name="rating" value="1" class="visually-hidden">
<label for="terrible" title="Terrible"></label>
<input type="radio" id="bad" name="rating" value="2" class="visually-hidden">
<label for="bad" title="Bad"></label>
<input type="radio" id="mixed" name="rating" value="3" class="visually-hidden">
<label for="mixed" title="Mixed"></label>
<input type="radio" id="good" name="rating" value="4" class="visually-hidden" checked>
<label for="good" title="Good"></label>
<input type="radio" id="excellent" name="rating" value="5" class="visually-hidden">
<label for="excellent" title="Excellent"></label>
</fieldset>
</form>
Sizes
Star ratings come with a smaller variant: .star-rating-sm
.
<form>
<fieldset class="star-rating star-rating-sm">
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible2" name="rating" value="1" class="visually-hidden">
<label for="terrible2" title="Terrible"></label>
<input type="radio" id="bad2" name="rating" value="2" class="visually-hidden">
<label for="bad2" title="Bad"></label>
<input type="radio" id="mixed2" name="rating" value="3" class="visually-hidden">
<label for="mixed2" title="Mixed"></label>
<input type="radio" id="good2" name="rating" value="4" class="visually-hidden" checked>
<label for="good2" title="Good"></label>
<input type="radio" id="excellent2" name="rating" value="5" class="visually-hidden">
<label for="excellent2" title="Excellent"></label>
</fieldset>
</form>
Dark variant
Add .star-rating-dark
to the .star-rating
for a dark variant.
<form>
<fieldset class="star-rating star-rating-dark">
<legend class="visually-hidden">Results relevance</legend>
<input type="radio" id="terrible3" name="rating" value="1" class="visually-hidden">
<label for="terrible3" title="Terrible"></label>
<input type="radio" id="bad3" name="rating" value="2" class="visually-hidden">
<label for="bad3" title="Bad"></label>
<input type="radio" id="mixed3" name="rating" value="3" class="visually-hidden">
<label for="mixed3" title="Mixed"></label>
<input type="radio" id="good3" name="rating" value="4" class="visually-hidden" checked>
<label for="good3" title="Good"></label>
<input type="radio" id="excellent3" name="rating" value="5" class="visually-hidden">
<label for="excellent3" title="Excellent"></label>
</fieldset>
</form>
Disabled
Make star ratings look inactive inside or outside a form by adding the disabled
boolean attribute to the <fieldset>
element and the checked
boolean attribute to any <input>
element.
<fieldset class="star-rating" disabled>
<input type="radio" id="terrible4" name="rating" value="1" class="visually-hidden">
<label for="terrible4" title="Terrible"></label>
<input type="radio" id="bad4" name="rating" value="2" class="visually-hidden">
<label for="bad4" title="Bad"></label>
<input type="radio" id="mixed4" name="rating" value="3" class="visually-hidden" checked>
<label for="mixed4" title="Mixed"></label>
<input type="radio" id="good4" name="rating" value="4" class="visually-hidden">
<label for="good4" title="Good"></label>
<input type="radio" id="excellent4" name="rating" value="5" class="visually-hidden">
<label for="excellent4" title="Excellent"></label>
</fieldset>
<span class="visually-hidden">rated 3 stars out of 5</span>
Sass
Variables
$form-check-input-width: 1em;
$form-check-min-height: $font-size-base * $input-btn-line-height;
$form-check-padding-start: $form-check-input-width + .5em;
$form-check-margin-bottom: .125rem;
$form-check-label-padding-top: .4375rem; // Boosted mod
$form-check-label-color: null;
$form-check-label-cursor: null;
$form-check-transition: null;
$form-check-input-active-filter: null;
$form-check-input-active-bg-color: $component-active-bg; // Boosted mod
$form-check-input-bg: $input-bg;
$form-check-input-border: $border-width solid $input-border-color;
$form-check-input-border-radius: 0;
$form-check-radio-border-radius: 50%;
$form-check-input-focus-border: null;
$form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;
$form-check-input-checked-color: $component-active-color;
$form-check-input-checked-bg-color: $component-active-bg;
$form-check-input-checked-border-color: $form-check-input-checked-bg-color;
$form-check-input-checked-bg-image: var(--#{$boosted-prefix}check-icon);
$form-check-input-disabled-color: $gray-900; // Boosted mod
$form-check-radio-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$form-check-input-checked-color}'/></svg>");
$form-check-input-indeterminate-color: $form-check-input-checked-color;
$form-check-input-indeterminate-bg-color: $form-check-input-checked-bg-color;
$form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;
$form-check-input-indeterminate-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 1'><path fill='#{$form-check-input-indeterminate-color}' d='M0 0h10v3H0z'/></svg>");
$form-check-input-disabled-opacity: null;
$form-check-label-disabled-opacity: null;
$form-check-btn-check-disabled-opacity: null;
$form-check-inline-margin-end: 1rem;
// Boosted mod: Star rating
$form-star-size: 1.5625rem;
$form-star-size-sm: 1.25rem;
$form-star-margin-between: -.125rem;
$form-star-focus-box-shadow: $input-btn-focus-box-shadow;
$form-star-focus-color: $black;
$form-star-focus-outline: $border-width solid $form-star-focus-color;
$form-star-focus-color-dark: $white;
$form-star-focus-outline-dark: $border-width solid $form-star-focus-color-dark;
// End mod
Mixin
@mixin form-star-rating($color) {
background-image: escape-svg(url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 25'><path fill='#{$color}' d='M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z'/></svg>"));
}