1. Components
  2. Form controls

Inline checkbox

Turn a single value on and off.

Inline checkbox orc-c-input-group

Turn a single value on and off.

  • 

    <label class="orc-c-input-group " for="">

	<input id="" type="checkbox" name="" value="" class="orc-c-input-group__control" >
	<span class="orc-c-input-group__text">Label</span>

</label>
<!-- end orc-c-input-group -->

Usage

When to use

Use this when the user has just one options, which they can select or not.

When to consider an alternative

When giving the user more than option, either use a checkbox field when they can select as many as they want; or a radio field when they may select only one.

Class Name Description 
orc-c-input-group
Required

Apply to the inline checkbox’s containing HTML element. This is set to display: flex to place the checkbox and corresponding text side-by-side. This is applied to a <label> element so that the checkbox and text inside can select/deselect the checkbox.

 
orc-c-input-group__control
Required

Actual checkbox input of the inline checkbox

 
orc-c-input-group__text
Required

Corresponding text label alongside the checkbox