Usage
Checkbox
Basic Usage
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input type="checkbox" id="checkbox-default" class="Checkbox" name="default" />
<div>
<label class="Label cursor-pointer" for="checkbox-default">Checkbox Label</label>
</div>
</div>Required Input
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input type="checkbox" id="checkbox-required" class="Checkbox" name="required" required />
<div>
<label class="Label Label--required cursor-pointer" for="checkbox-required">Checkbox Label</label>
</div>
</div>Validation State with Validation Text
See Validation state dictionary and ValidationText component.
- To render validation text as a list, use <ul> element inside of .ValidationText.
- To render validation text with an icon, add <svg> icon inside of .ValidationText.
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input
type="checkbox"
id="checkbox-warning"
class="Checkbox Checkbox--warning"
name="warning"
aria-describedby="checkbox-warning-helper-text"
/>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label class="Label cursor-pointer" for="checkbox-warning">Checkbox Label</label>
<div class="ValidationText ValidationText--warning" id="checkbox-warning-helper-text">Warning validation text</div>
</div>
</div>
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input
type="checkbox"
id="checkbox-danger"
class="Checkbox Checkbox--danger"
name="danger"
aria-describedby="checkbox-danger-helper-text"
/>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label class="Label cursor-pointer" for="checkbox-danger">Checkbox Label</label>
<div class="ValidationText ValidationText--danger" id="checkbox-danger-helper-text">
<ul>
<li>First validation text</li>
<li>Second validation text</li>
</ul>
</div>
</div>
</div>
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input
type="checkbox"
id="checkbox-warning"
class="Checkbox Checkbox--warning"
name="warning"
aria-describedby="checkbox-warning-helper-text"
/>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label class="Label cursor-pointer" for="checkbox-warning">Checkbox Label</label>
<div class="ValidationText ValidationText--warning" id="checkbox-warning-helper-text">
<svg class="Icon" width="20" height="20" aria-hidden="true">
<use href="/assets/icons/svg/sprite.svg#warning" />
</svg>
<span>Warning validation text with icon</span>
</div>
</div>
</div>Hidden Label
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-0);">
<input type="checkbox" id="checkbox-hidden-label" class="Checkbox" name="hiddenLabel" required />
<div>
<label class="Label accessibility-hidden" for="checkbox-hidden-label">Checkbox Label</label>
</div>
</div>Helper Text
To add helper text, use the HelperText component:
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input
type="checkbox"
id="checkbox-helper-text"
class="Checkbox"
name="helperText"
aria-describedby="checkbox-helper-text-helper-text"
/>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label class="Label cursor-pointer" for="checkbox-helper-text">Checkbox Label</label>
<div class="HelperText" id="checkbox-helper-text-helper-text">Helper text</div>
</div>
</div>Consent Checkbox with Details
For consent scenarios where users need access to terms and conditions or privacy policies, use the InputDetails element with modal triggers.
Full Example with Validation and Helper Text
Complete example showing label, details with multiple links, helper text, and validation:
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input
type="checkbox"
id="consent-full-example"
class="Checkbox Checkbox--danger"
name="consentFullExample"
aria-details="consent-full-example-details"
aria-describedby="consent-full-example-helper-text consent-full-example-validation-text"
required
/>
<div class="Stack Stack--spacing" style="--stack-spacing: var(--spirit-space-400);">
<label class="Label Label--required cursor-pointer" for="consent-full-example">
I agree to the terms and privacy policy
</label>
<div id="consent-full-example-details" class="InputDetails">
<button
type="button"
class="link-underlined link-inherit"
data-spirit-toggle="modal"
data-spirit-target="#terms-modal"
aria-controls="terms-modal"
aria-expanded="false"
>
See full terms and conditions
</button>
<button
type="button"
class="link-underlined link-inherit"
data-spirit-toggle="modal"
data-spirit-target="#privacy-modal"
aria-controls="privacy-modal"
aria-expanded="false"
>
See privacy policy
</button>
</div>
<div class="HelperText" id="consent-full-example-helper-text">
Please read the documents carefully before agreeing
</div>
<div class="ValidationText ValidationText--danger" id="consent-full-example-validation-text">
You must agree to continue
</div>
</div>
</div>
<!-- Modal definitions -->Accessibility
- The details content is linked to the checkbox via the aria-details attribute
- Use <button> elements with link styling (e.g., link-underlined, link-inherit), NOT <a> tags, for modal triggers
- The aria-details attribute is separate from aria-describedby:
- aria-describedby announces essential information immediately (helper text, validation messages)
- aria-details points to supplementary content that users can explore when needed (terms links, additional info)
Disabled State
<div class="Flex Flex--horizontal Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input type="checkbox" id="checkbox-disabled" class="Checkbox" name="disabled" disabled />
<div>
<label class="Label Label--disabled" for="checkbox-disabled">Checkbox Label</label>
</div>
</div>As an Item
<div class="Item">
<div class="Item__slot" role="presentation">
<input type="checkbox" id="checkbox-item-default" class="Checkbox Checkbox--item" name="item" />
</div>
<div class="Item__content" role="presentation">
<label class="Label element-stretched cursor-pointer" for="checkbox-item-default">Checkbox Label</label>
</div>
</div>Input Position
The input position can be set using Flex component with direction.
Input on End
<div class="Flex Flex--horizontalReversed Flex--inline py-500" style="--flex-spacing-x: var(--spirit-space-500);">
<input type="checkbox" id="checkbox-position-end" class="Checkbox" name="position" />
<div>
<label class="Label cursor-pointer" for="checkbox-position-end">Checkbox Label</label>
</div>
</div>Responsive Input Position
Use responsive breakpoint modifiers to change input position at different screen sizes:
<div
class="Flex Flex--horizontal Flex--inline Flex--tablet--horizontalReversed Flex--desktop--horizontal py-500"
style="--flex-spacing-x: var(--spirit-space-500);"
>
<input type="checkbox" id="checkbox-position-responsive" class="Checkbox" name="position" />
<div>
<label class="Label cursor-pointer" for="checkbox-position-responsive">Checkbox Label</label>
</div>
</div>