components-checkable - EAC design system

Checkable

Type variations

Defines the type of the input (e.g. radio or checkbox);

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

<li class="field field-type-radio field--light">
	<input type="radio" id="option-1" name="radio-1" value="Option 1" >
	<label for="option-1">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 1</span>
	</label>
</li>

<li class="field field-type-radio field--light">
	<input type="radio" id="option-2" name="radio-1" value="Option 2" >
	<label for="option-2">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 2</span>
	</label>
</li>

<li class="field field-type-radio field--light">
	<input type="radio" id="option-3" name="radio-1" value="Option 3" >
	<label for="option-3">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 3</span>
	</label>
</li>

<li class="field field-type-checkbox field--light">
	<input type="checkbox" id="option-4" name="checkbox-1" value="Option 1" >
	<label for="option-4">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 1</span>
	</label>
</li>

<li class="field field-type-checkbox field--light">
	<input type="checkbox" id="option-5" name="checkbox-1" value="Option 2" >
	<label for="option-5">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 2</span>
	</label>
</li>

<li class="field field-type-checkbox field--light">
	<input type="checkbox" id="option-6" name="checkbox-1" value="Option 3" >
	<label for="option-6">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 3</span>
	</label>
</li>

Dark theme variations

Defines the style to be applied on dark mode.

Option 1

Option 2

Option 3

Option 1

Option 2

Option 3

<li class="field field-type-radio field--dark">
	<input type="radio" id="option-7" name="radio-2" value="Option 1" >
	<label for="option-7">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 1</span>
	</label>
</li>

<li class="field field-type-radio field--dark">
	<input type="radio" id="option-8" name="radio-2" value="Option 2" >
	<label for="option-8">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 2</span>
	</label>
</li>

<li class="field field-type-radio field--dark">
	<input type="radio" id="option-8" name="radio-2" value="Option 3" >
	<label for="option-8">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 3</span>
	</label>
</li>

<li class="field field-type-checkbox field--dark">
	<input type="checkbox" id="option-9" name="checkbox-2" value="Option 1" >
	<label for="option-9">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 1</span>
	</label>
</li>

<li class="field field-type-checkbox field--dark">
	<input type="checkbox" id="option-10" name="checkbox-2" value="Option 2" >
	<label for="option-10">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 2</span>
	</label>
</li>

<li class="field field-type-checkbox field--dark">
	<input type="checkbox" id="option-11" name="checkbox-2" value="Option 3" >
	<label for="option-11">
		<div class="svg_wrapper">
			<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.4375 1.56177L7.1185 17.731C6.81554 18.1664 6.32177 18.4295 5.79145 18.4383C5.26114 18.4471 4.75894 18.2004 4.44175 17.7753L1.5625 13.9368' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>
		</div>
		<span class="field-content">Option 3</span>
	</label>
</li>

List of arguments for checkable

Argument	Type	Description	Possible Values
type	string	Defines the label of the field (mandatory even if label is hidden).	radio, checkbox
label	string	Defines the label of the field (mandatory even if label is hidden).	—
label-slug	string	Defines the label that will be used for the 'name', the 'for' and the 'id' attributes linking the label and the input.	—
name	string	Specifies the name of the component.	—
theme	string	Specifies the theme of the component.	light, dark
size	array	Defines the size of the component.	default, small
custom-attributes	string	Defines any other attributes added to the input (ex: pattern).	—

Design System

Checkable

Type variations

Dark theme variations

List of arguments for checkable

Basics

Components

Templates