Checkbox, Radio, and Toggle

Description

Checkboxes, radios, and toggles provide users with different selection and activation tools.

Check the Lexicon Checkbox, Radio, and Toggle Pattern for a more in-depth look at the motivations and proper usage of this component.

Checkbox

States

Off

On disabled

Off disabled

Indeterminate

{call ClayCheckbox.render}
	{param label: 'Unchecked' /}
{/call}

{call ClayCheckbox.render}
	{param checked: true /}
	{param label: 'Checked' /}
{/call}

{call ClayCheckbox.render}
	{param indeterminate: true /}
	{param label: 'Indeterminate' /}
{/call}

{call ClayCheckbox.render}
	{param disabled: true /}
	{param label: 'Unchecked disabled' /}
{/call}

{call ClayCheckbox.render}
	{param checked: true /}
	{param disabled: true /}
	{param label: 'Checked disabled' /}
{/call}

{call ClayCheckbox.render}
	{param disabled: true /}
	{param indeterminate: true /}
	{param label: 'Indeterminate disabled' /}
{/call}

<clay-checkbox label="Unchecked"></clay-checkbox>

<clay-checkbox
	checked="true"
	label="Checked">
</clay-checkbox>

<clay-checkbox
	indeterminate="true"
	label="Indeterminate">
</clay-checkbox>

<clay-checkbox
	disable="true"
	label="Unchecked disabled">
</clay-checkbox>

<clay-checkbox
	hecked="true"
	disabled="true"
	label="Checked disabled">
</clay-checkbox>

<clay-checkbox
	disabled="true"
	indeterminate="true"
	label="Indeterminate disabled">
</clay-checkbox>

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Unchecked</span>
		</span>
	</label>
</div>

<div class="custom-control custom-checkbox">
	<label>
		<input checked class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Checked</span>
		</span>
	</label>
</div>

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Indeterminate</span>
		</span>
	</label>
</div>

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" disabled type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Unchecked Disabled</span>
		</span>
	</label>
</div>

<div class="custom-control custom-checkbox">
	<label>
		<input checked class="custom-control-input" disabled type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Checked Disabled</span>
		</span>
	</label>
</div>

<div class="custom-control custom-checkbox">
	<label>
		<input class="custom-control-input" disabled type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Indeterminate Disabled</span>
		</span>
	</label>
</div>

Checkbox inline

Off

On disabled

Off disabled

Indeterminate

{call ClayCheckbox.render}
	{param label: 'Unchecked' /}
	{param inline: true /}
{/call}

{call ClayCheckbox.render}
	{param checked: true /}
	{param label: 'Checked' /}
	{param inline: true /}
{/call}

{call ClayCheckbox.render}
	{param indeterminate: true /}
	{param label: 'Indeterminate' /}
	{param inline: true /}
{/call}

{call ClayCheckbox.render}
	{param disabled: true /}
	{param label: 'Unchecked disabled' /}
	{param inline: true /}
{/call}

{call ClayCheckbox.render}
	{param checked: true /}
	{param disabled: true /}
	{param label: 'Checked disabled' /}
	{param inline: true /}
{/call}

{call ClayCheckbox.render}
	{param disabled: true /}
	{param indeterminate: true /}
	{param label: 'Indeterminate disabled' /}
	{param inline: true /}
{/call}

<clay-checkbox label="Unchecked" inline="true"></clay-checkbox>

<clay-checkbox
	checked="true"
	label="Checked"
	inline="true">
</clay-checkbox>

<clay-checkbox
	indeterminate="true"
	label="Indeterminate"
	inline="true">
</clay-checkbox>

<clay-checkbox
	disable="true"
	label="Unchecked disabled"
	inline="true">
</clay-checkbox>

<clay-checkbox
	hecked="true"
	disabled="true"
	label="Checked disabled"
	inline="true">
</clay-checkbox>

<clay-checkbox
	disabled="true"
	indeterminate="true"
	label="Indeterminate disabled"
	inline="true">
</clay-checkbox>

<div class="custom-control custom-checkbox custom-control-inline">
	<label>
		<input checked class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On</span>
		</span>
	</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<label>
		<input class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off</span>
		</span>
	</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<label>
		<input checked class="custom-control-input" disabled type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On disabled</span>
		</span>
	</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<label>
		<input class="custom-control-input" disabled type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off disabled</span>
		</span>
	</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
	<label>
		<input class="custom-control-input" type="checkbox"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Indeterminate</span>
		</span>
	</label>
</div>

API

Property	Description	Type	Required	Default
ariaLabelledBy	Aria labelled by attribute to apply to the input.	string\|undefined	false	undefined
checked	Flag to indicate if checkbox is checked.	bool	false	false
data	Data to add to the element.	object	false	undefined
defaultEventHandler	Object that wires events with default listeners	object\|undefined	false	undefined
disabled	Flag to indicate if checkbox is disabled.	bool	false	false
elementClasses	CSS classes to be applied to the element.	string\|undefined	false	undefined
id	Id to be applied to the element.	string\|undefined	false	undefined
indeterminate	Flag to indicate if checkbox's checked state is indeterminate.	bool	false	false
inline	Flag to indicate if input should be wrapped to be inline or not.	bool	false	false
label	Label of the input. Required for accessibility.	string\|undefined	false	undefined
labelContent	Custom content of the checkbox label. Use it to use your custom html.	html\|undefined	false	undefined
name	Name to be applied to the element.	string\|undefined	false	undefined
showLabel	Flag to indicate if label should be hide.	bool	false	true
value	Value to be applied to the element.	string\|undefined	false	undefined

Radio

States

Off

On disabled

Off disabled

{call ClayRadio.render}
	{param checked: true /}
	{param id: 'radio1' /}
	{param label: 'On' /}
	{param name: 'radio' /}
{/call}

{call ClayRadio.render}
	{param id: 'radio2' /}
	{param label: 'Off' /}
	{param name: 'radio' /}
{/call}

{call ClayRadio.render}
	{param checked: true /}
	{param id: 'radio1' /}
	{param disabled: true /}
	{param label: 'On disabled' /}
	{param name: 'radio' /}
{/call}

{call ClayRadio.render}
	{param id: 'radio2' /}
	{param label: 'Off disabled' /}
	{param name: 'radio' /}
	{param disabled: true /}
{/call}

<clay-radio
	checked="true"
	id="radio1"
	label="On"
	name="radio">
</clay-radio>

<clay-radio
	id="radio2"
	label="Off"
	name="radio">
</clay-radio>

<clay-radio
	checked="true"
	id="radio1"
	label="On disabled"
	name="radio"
	disabled="true">
</clay-radio>

<clay-radio
	id="radio2"
	label="Off disabled"
	name="radio"
	disabled="true">
</clay-radio>

<div class="custom-control custom-radio">
	<label>
		<input checked class="custom-control-input" id="radio1" name="radio" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio">
	<label>
		<input class="custom-control-input" id="radio2" name="radio" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio">
	<label>
		<input checked disabled class="custom-control-input" id="radio3" name="radio1" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On disabled</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio">
	<label>
		<input class="custom-control-input" disabled id="radio3" name="radio1" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off disabled</span>
		</span>
	</label>
</div>

Radio inline

Off

On disabled

Off disabled

{call ClayRadio.render}
	{param checked: true /}
	{param id: 'radio1' /}
	{param label: 'On' /}
	{param name: 'radio' /}
	{param inline: true /}
{/call}

{call ClayRadio.render}
	{param id: 'radio2' /}
	{param label: 'Off' /}
	{param name: 'radio' /}
	{param inline: true /}
{/call}

{call ClayRadio.render}
	{param checked: true /}
	{param id: 'radio1' /}
	{param disabled: true /}
	{param label: 'On disabled' /}
	{param name: 'radio' /}
	{param inline: true /}
{/call}

{call ClayRadio.render}
	{param id: 'radio2' /}
	{param label: 'Off disabled' /}
	{param name: 'radio' /}
	{param disabled: true /}
	{param inline: true /}
{/call}

<clay-radio
	checked="true"
	id="radio1"
	label="On"
	name="radio"
	inline="true">
</clay-radio>

<clay-radio
	id="radio2"
	label="Off"
	name="radio"
	inline="true">
</clay-radio>

<clay-radio
	checked="true"
	id="radio1"
	label="On disabled"
	name="radio"
	disabled="true"
	inline="true">
</clay-radio>

<clay-radio
	id="radio2"
	label="Off disabled"
	name="radio"
	disabled="true"
	inline="true">
</clay-radio>

<div class="custom-control custom-radio custom-control-inline">
	<label>
		<input checked class="custom-control-input" id="radio1" name="radio" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<label>
		<input class="custom-control-input" id="radio2" name="radio" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<label>
		<input checked disabled class="custom-control-input" id="radio3" name="radio1" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">On disabled</span>
		</span>
	</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
	<label>
		<input class="custom-control-input" disabled id="radio3" name="radio1" type="radio"/>
		<span class="custom-control-label">
			<span class="custom-control-label-text">Off disabled</span>
		</span>
	</label>
</div>

API

Property	Description	Type	Required	Default
checked	Flag to indicate if checkbox is checked.	bool	false	false
data	Data to add to the element.	object	false	undefined
defaultEventHandler	Object that wires events with default listeners	object\|undefined	false	undefined
disabled	Flag to indicate if checkbox is disabled.	bool	false	false
elementClasses	CSS classes to be applied to the element.	string\|undefined	false	undefined
id	Id to be applied to the element.	string\|undefined	false	undefined
inline	Flag to indicate if input should be wrapped to be inline or not.	bool	false	false
label	Label of the input. Required for accessibility.	string\|undefined	false	undefined
labelContent	Custom content of the radio label. Use it to use your custom html.	html\|undefined	false	undefined
name	Name to be applied to the element.	string\|undefined	false	undefined
showLabel	Flag to indicate if label should be hide.	bool	false	true
value	Value to be applied to the element.	string\|undefined	false	undefined

Toggle

States

<div class="form-group">
	<label class="toggle-switch">
		<input class="toggle-switch-check" checked type="checkbox"/>
		<span aria-hidden="true" class="toggle-switch-bar">
			<span class="toggle-switch-handle"></span>
		</span>
	</label>
</div>
<div class="form-group">
	<label class="toggle-switch">
		<input class="toggle-switch-check" type="checkbox"/>
		<span aria-hidden="true" class="toggle-switch-bar">
			<span class="toggle-switch-handle"></span>
		</span>
	</label>
</div>
<div class="form-group">
	<label class="toggle-switch">
		<input class="toggle-switch-check" checked disabled type="checkbox"/>
		<span aria-hidden="true" class="toggle-switch-bar">
			<span class="toggle-switch-handle"></span>
		</span>
	</label>
</div>
<div class="form-group">
	<label class="toggle-switch">
		<input class="toggle-switch-check" disabled type="checkbox"/>
		<span aria-hidden="true" class="toggle-switch-bar">
			<span class="toggle-switch-handle"></span>
		</span>
	</label>
</div>

Variations

Toggle with icon

<div class="form-group">
	<label class="toggle-switch">
		<input class="toggle-switch-check" type="checkbox"/>
		<span aria-hidden="true" class="toggle-switch-bar">
			<span class="toggle-switch-handle" data-label-off="" data-label-on="">
				<span class="button-icon button-icon-on toggle-switch-icon">
					<svg class="lexicon-icon lexicon-icon-unlock" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#unlock" />
					</svg>
				</span>
				<span class="button-icon button-icon-off toggle-switch-icon">
					<svg class="lexicon-icon lexicon-icon-lock" focusable="false" role="presentation">
						<use href="/images/icons/icons.svg#lock" />
					</svg>
				</span>
			</span>
		</span>
	</label>
</div>