indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

Checks & Radios

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Approach #

With the aid of .form-check, a set of classes for both input types that enhances the style and behavior of their HTML elements, more customization and cross-browser consistency are provided. Browser default checkboxes and radio buttons are substituted. Checkboxes allow you to choose one or more alternatives from a list, whereas radio buttons only allow to choose one.

Our <input>s and <label>s are sibling elements in terms of structure rather than an <input> contained within a <label>. This is a little bit more wordy because you need to specify an id and attributes to link the input and label. The sibling selector (~) is used for all of our <input> states, such as :checked and or :disabled. We can easily style the wording for each item depending on the status of the <input>'s when used in conjunction with the .form-check-label class.

Our checks use custom UX4G 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>
RESULT

Indeterminate #

The :indeterminate pseudo class can be used by checkboxes when manually specified via JavaScript (there is no HTML property 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>
RESULT

Disabled #

In order to better convey the input's status, adding the disabled property causes the related <label>s to be automatically formatted to match with a lighter color. 

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

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

Disabled #

In order to better convey the input's status, adding the disabled property causes the related <label>s to be automatically formatted to match with a lighter color. 

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

Switches #

A switch uses the .form-switch class to render a toggle switch but has the markup of a custom checkbox. To more clearly describe the type of control to assistive technologies that support this role, think about using role="switch". It will default to being announced as a conventional checkbox in older assistive technologies. The disabled attribute is also supported via switches. 

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

Default (stacked) #

All checkboxes and radios that are immediate siblings will by default be vertically stacked and properly spaced apart 

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

Inline #

Add to group checkboxes or radio buttons on the same horizontal row .online form-checking 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>
RESULT 
<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>
RESULT

Reverse #

Use the .form-check-reverse modifier class to position your checkboxes, radio buttons, and switches on the other side. 

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

Without labels #

Leave the wrapping off check the form for radio buttons and checkboxes without label text. It's important to keep in mind to give assistive technologies some kind of accessible name (for example, by utilizing aria-label). Details can be found in the accessibility part of the forms overview. 

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

Toggle buttons #

Use the .btn styles on the <label> components rather than the .form-check-label styles to create checkboxes and radio buttons that resemble buttons. If necessary, these toggle buttons may also be placed together in a button group.

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>
RESULT
<input type="checkbox" class="btn-check" id="btn-check-2" checked autocomplete="off"/>
<label class="btn btn-primary" for="btn-check-2">Checked</label>
RESULT
<input type="checkbox" class="btn-check" id="btn-check-3" autocomplete="off" disabled/>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>
RESULT

INFO

Visually, these checkbox toggle buttons are identical to the button plugin toggle buttons. However, they are conveyed differently by assistive technologies: the checkbox toggles will be announced by screen readers as "checked"/"not checked" (since, despite their appearance, they are fundamentally still checkboxes), whereas the button plugin toggle buttons will be announced as "button"/"button pressed". The choice between these two approaches will depend on the type of toggle you are creating, and whether or not the toggle will make sense to users when announced as a checkbox or as an actual button.

Radio toggle buttons #

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

Outlined styles #

Different variants of .btn, such at the various outlined styles, are supported.

<input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off"/>
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br/>

  
<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off"/>
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br/>

  
<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked/>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

  
<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off"/>
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
RESULT


Sass #

Variables #

$form-check-input-width:                  1em;
$form-check-min-height:                   $font-size-base * $line-height-base;
$form-check-padding-start:                $form-check-input-width + .5em;
$form-check-margin-bottom:                .125rem;
$form-check-label-color:                  null;
$form-check-label-cursor:                 null;
$form-check-transition:                   null;

$form-check-input-active-filter:          brightness(90%);

$form-check-input-bg:                     $input-bg;
$form-check-input-border:                 var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
$form-check-input-border-radius:          .25em;
$form-check-radio-border-radius:          50%;
$form-check-input-focus-border:           $input-focus-border-color;
$form-check-input-focus-box-shadow:       $focus-ring-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:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
$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:          $component-active-color;
$form-check-input-indeterminate-bg-color:       $component-active-bg;
$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 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

$form-check-input-disabled-opacity:        .5;
$form-check-label-disabled-opacity:        $form-check-input-disabled-opacity;
$form-check-btn-check-disabled-opacity:    $btn-disabled-opacity;

$form-check-inline-margin-end:    1rem;