Home
Components
Option
Option
The Option component provides a reusable pattern for option in the interface.
Checkbox
A basic checkbox option with a label, name, and value — the default option type.
<div class="c-option c-option__checkbox">
<input name="terms" id="id_6aaf3c8cab675" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Accept terms and conditions" value="1" aria-checked="false"
tabindex="0" label="Accept terms and conditions" aria-labelledby="label_id_6aaf3c8cab675" /> <label for="id_6aaf3c8cab675" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cab675"
class="c-option__checkbox--label-text">Accept terms and conditions</span></label>
<div id="error_input_id_6aaf3c8cab675_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Accept terms and conditions',
'name' => 'terms',
'value' => '1',
])
@endoption
Radio buttons
Radio buttons sharing the same name attribute form a group where only one option can be selected at a time.
<div class="c-option c-option__radio">
<input name="choice" id="id_6aaf3c8cab961" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Option A" value="a" aria-checked="false" tabindex="0" label=
"Option A" aria-labelledby="label_id_6aaf3c8cab961" /> <label for="id_6aaf3c8cab961" class="c-option__radio--label"> <span id="label_id_6aaf3c8cab961" class="c-option__radio--label-text">Option
A</span></label>
<div id="error_input_id_6aaf3c8cab961_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="choice" id="id_6aaf3c8caba37" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Option B" value="b" aria-checked="false" tabindex="0" label=
"Option B" aria-labelledby="label_id_6aaf3c8caba37" /> <label for="id_6aaf3c8caba37" class="c-option__radio--label"> <span id="label_id_6aaf3c8caba37" class="c-option__radio--label-text">Option
B</span></label>
<div id="error_input_id_6aaf3c8caba37_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="choice" id="id_6aaf3c8cabb0f" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Option C" value="c" aria-checked="false" tabindex="0" label=
"Option C" aria-labelledby="label_id_6aaf3c8cabb0f" /> <label for="id_6aaf3c8cabb0f" class="c-option__radio--label"> <span id="label_id_6aaf3c8cabb0f" class="c-option__radio--label-text">Option
C</span></label>
<div id="error_input_id_6aaf3c8cabb0f_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'radio',
'label' => 'Option A',
'name' => 'choice',
'value' => 'a',
])
@endoption
@option([
'type' => 'radio',
'label' => 'Option B',
'name' => 'choice',
'value' => 'b',
])
@endoption
@option([
'type' => 'radio',
'label' => 'Option C',
'name' => 'choice',
'value' => 'c',
])
@endoption
Pre-checked state
Setting the checked parameter to true renders the option pre-selected on load, for both checkbox and radio types.
<div class="c-option c-option__checkbox">
<input name="newsletter" id="id_6aaf3c8cabc74" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Pre-checked checkbox" value="1" checked="checked"
aria-checked="true" tabindex="0" label="Pre-checked checkbox" aria-labelledby="label_id_6aaf3c8cabc74" /> <label for="id_6aaf3c8cabc74" class="c-option__checkbox--label"> <span id=
"label_id_6aaf3c8cabc74" class="c-option__checkbox--label-text">Pre-checked checkbox</span></label>
<div id="error_input_id_6aaf3c8cabc74_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="preset" id="id_6aaf3c8cabd50" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Pre-selected radio" value="yes" checked="checked" aria-checked=
"true" tabindex="0" label="Pre-selected radio" aria-labelledby="label_id_6aaf3c8cabd50" /> <label for="id_6aaf3c8cabd50" class="c-option__radio--label"> <span id="label_id_6aaf3c8cabd50" class=
"c-option__radio--label-text">Pre-selected radio</span></label>
<div id="error_input_id_6aaf3c8cabd50_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Pre-checked checkbox',
'name' => 'newsletter',
'value' => '1',
'checked' => true,
])
@endoption
@option([
'type' => 'radio',
'label' => 'Pre-selected radio',
'name' => 'preset',
'value' => 'yes',
'checked' => true,
])
@endoption
Required
Setting required to true adds HTML5 validation attributes so the field must be interacted with before the form can be submitted.
<div class="c-option c-option__checkbox">
<input name="privacy" id="id_6aaf3c8cabea9" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="I agree to the privacy policy" value="1" required=""
data-required="1" aria-required="true" data-js-required="" aria-checked="false" tabindex="0" label="I agree to the privacy policy" aria-labelledby="label_id_6aaf3c8cabea9" /> <label for=
"id_6aaf3c8cabea9" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cabea9" class="c-option__checkbox--label-text">I agree to the privacy policy</span></label>
<div id="error_input_id_6aaf3c8cabea9_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="confirm" id="id_6aaf3c8cabf72" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Yes, I confirm" value="yes" required="" data-required="1"
aria-required="true" data-js-required="" aria-checked="false" tabindex="0" label="Yes, I confirm" aria-labelledby="label_id_6aaf3c8cabf72" /> <label for="id_6aaf3c8cabf72" class=
"c-option__radio--label"> <span id="label_id_6aaf3c8cabf72" class="c-option__radio--label-text">Yes, I confirm</span></label>
<div id="error_input_id_6aaf3c8cabf72_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'I agree to the privacy policy',
'name' => 'privacy',
'value' => '1',
'required' => true,
])
@endoption
@option([
'type' => 'radio',
'label' => 'Yes, I confirm',
'name' => 'confirm',
'value' => 'yes',
'required' => true,
])
@endoption
Disabled
Adding the is-disabled class via classList together with the disabled HTML attribute visually disables the option and prevents interaction.
<div class="c-option is-disabled c-option__checkbox">
<input disabled="disabled" name="disabledCheck" id="id_6aaf3c8cac0d3" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Disabled unchecked" value="1"
aria-checked="false" tabindex="0" label="Disabled unchecked" aria-labelledby="label_id_6aaf3c8cac0d3" /> <label for="id_6aaf3c8cac0d3" class="c-option__checkbox--label"> <span id=
"label_id_6aaf3c8cac0d3" class="c-option__checkbox--label-text">Disabled unchecked</span></label>
<div id="error_input_id_6aaf3c8cac0d3_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option is-disabled c-option__checkbox">
<input disabled="disabled" name="disabledChecked" id="id_6aaf3c8cac1a1" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Disabled checked" value="1"
checked="checked" aria-checked="true" tabindex="0" label="Disabled checked" aria-labelledby="label_id_6aaf3c8cac1a1" /> <label for="id_6aaf3c8cac1a1" class="c-option__checkbox--label"> <span id=
"label_id_6aaf3c8cac1a1" class="c-option__checkbox--label-text">Disabled checked</span></label>
<div id="error_input_id_6aaf3c8cac1a1_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option is-disabled c-option__radio">
<input disabled="disabled" name="disabledRadio" id="id_6aaf3c8cac25e" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Disabled radio" value="x" aria-checked=
"false" tabindex="0" label="Disabled radio" aria-labelledby="label_id_6aaf3c8cac25e" /> <label for="id_6aaf3c8cac25e" class="c-option__radio--label"> <span id="label_id_6aaf3c8cac25e" class=
"c-option__radio--label-text">Disabled radio</span></label>
<div id="error_input_id_6aaf3c8cac25e_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Disabled unchecked',
'name' => 'disabledCheck',
'value' => '1',
'classList' => ['is-disabled'],
'attributeList' => ['disabled' => 'disabled'],
])
@endoption
@option([
'type' => 'checkbox',
'label' => 'Disabled checked',
'name' => 'disabledChecked',
'value' => '1',
'checked' => true,
'classList' => ['is-disabled'],
'attributeList' => ['disabled' => 'disabled'],
])
@endoption
@option([
'type' => 'radio',
'label' => 'Disabled radio',
'name' => 'disabledRadio',
'value' => 'x',
'classList' => ['is-disabled'],
'attributeList' => ['disabled' => 'disabled'],
])
@endoption
Invalid state
Adding the is-invalid class via classList applies danger-color styling to the box border and label text to signal a validation error.
<div class="c-option is-invalid c-option__checkbox">
<input name="invalidCheck" id="id_6aaf3c8cac3a0" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Invalid checkbox" value="1" aria-checked="false"
tabindex="0" label="Invalid checkbox" aria-labelledby="label_id_6aaf3c8cac3a0" /> <label for="id_6aaf3c8cac3a0" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cac3a0" class=
"c-option__checkbox--label-text">Invalid checkbox</span></label>
<div id="error_input_id_6aaf3c8cac3a0_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option is-invalid c-option__radio">
<input name="invalidRadio" id="id_6aaf3c8cac46f" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Invalid radio" value="x" aria-checked="false" tabindex="0"
label="Invalid radio" aria-labelledby="label_id_6aaf3c8cac46f" /> <label for="id_6aaf3c8cac46f" class="c-option__radio--label"> <span id="label_id_6aaf3c8cac46f" class=
"c-option__radio--label-text">Invalid radio</span></label>
<div id="error_input_id_6aaf3c8cac46f_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Invalid checkbox',
'name' => 'invalidCheck',
'value' => '1',
'classList' => ['is-invalid'],
])
@endoption
@option([
'type' => 'radio',
'label' => 'Invalid radio',
'name' => 'invalidRadio',
'value' => 'x',
'classList' => ['is-invalid'],
])
@endoption
Valid state
Adding the is-valid class via classList applies success-color styling to the box border and label text to confirm a correct selection.
<div class="c-option is-valid c-option__checkbox">
<input name="validCheck" id="id_6aaf3c8cac5b0" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Valid checkbox" value="1" checked="checked" aria-checked=
"true" tabindex="0" label="Valid checkbox" aria-labelledby="label_id_6aaf3c8cac5b0" /> <label for="id_6aaf3c8cac5b0" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cac5b0" class=
"c-option__checkbox--label-text">Valid checkbox</span></label>
<div id="error_input_id_6aaf3c8cac5b0_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option is-valid c-option__radio">
<input name="validRadio" id="id_6aaf3c8cac676" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Valid radio" value="x" checked="checked" aria-checked="true"
tabindex="0" label="Valid radio" aria-labelledby="label_id_6aaf3c8cac676" /> <label for="id_6aaf3c8cac676" class="c-option__radio--label"> <span id="label_id_6aaf3c8cac676" class=
"c-option__radio--label-text">Valid radio</span></label>
<div id="error_input_id_6aaf3c8cac676_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Valid checkbox',
'name' => 'validCheck',
'value' => '1',
'checked' => true,
'classList' => ['is-valid'],
])
@endoption
@option([
'type' => 'radio',
'label' => 'Valid radio',
'name' => 'validRadio',
'value' => 'x',
'checked' => true,
'classList' => ['is-valid'],
])
@endoption
Small size
Adding the c-option--sm modifier class via classList renders a smaller checkbox box and label font size.
<div class="c-option c-option--sm c-option__checkbox">
<input name="sizeSmCheck" id="id_6aaf3c8cac7e6" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Small checkbox" value="1" aria-checked="false" tabindex=
"0" label="Small checkbox" aria-labelledby="label_id_6aaf3c8cac7e6" /> <label for="id_6aaf3c8cac7e6" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cac7e6" class=
"c-option__checkbox--label-text">Small checkbox</span></label>
<div id="error_input_id_6aaf3c8cac7e6_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="sizeMdCheck" id="id_6aaf3c8cb4a37" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Default size checkbox" value="1" aria-checked="false"
tabindex="0" label="Default size checkbox" aria-labelledby="label_id_6aaf3c8cb4a37" /> <label for="id_6aaf3c8cb4a37" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cb4a37" class=
"c-option__checkbox--label-text">Default size checkbox</span></label>
<div id="error_input_id_6aaf3c8cb4a37_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Small checkbox',
'name' => 'sizeSmCheck',
'value' => '1',
'classList' => ['c-option--sm'],
])
@endoption
@option([
'type' => 'checkbox',
'label' => 'Default size checkbox',
'name' => 'sizeMdCheck',
'value' => '1',
])
@endoption
Custom name
The name parameter sets the HTML name attribute on the input; when omitted, the name is derived automatically from the label text.
<div class="c-option c-option__checkbox">
<input name="newsletter_opt_in" id="id_6aaf3c8cb4bb2" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Subscribe to newsletter" value="1" aria-checked=
"false" tabindex="0" label="Subscribe to newsletter" aria-labelledby="label_id_6aaf3c8cb4bb2" /> <label for="id_6aaf3c8cb4bb2" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cb4bb2"
class="c-option__checkbox--label-text">Subscribe to newsletter</span></label>
<div id="error_input_id_6aaf3c8cb4bb2_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="delivery_time" id="id_6aaf3c8cb4c8b" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Morning" value="morning" aria-checked="false" tabindex="0"
label="Morning" aria-labelledby="label_id_6aaf3c8cb4c8b" /> <label for="id_6aaf3c8cb4c8b" class="c-option__radio--label"> <span id="label_id_6aaf3c8cb4c8b" class=
"c-option__radio--label-text">Morning</span></label>
<div id="error_input_id_6aaf3c8cb4c8b_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="delivery_time" id="id_6aaf3c8cb4d68" data-component="option" type="radio" class="c-option__radio--hidden-box" placeholder="Afternoon" value="afternoon" aria-checked="false" tabindex=
"0" label="Afternoon" aria-labelledby="label_id_6aaf3c8cb4d68" /> <label for="id_6aaf3c8cb4d68" class="c-option__radio--label"> <span id="label_id_6aaf3c8cb4d68" class=
"c-option__radio--label-text">Afternoon</span></label>
<div id="error_input_id_6aaf3c8cb4d68_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Subscribe to newsletter',
'name' => 'newsletter_opt_in',
'value' => '1',
])
@endoption
@option([
'type' => 'radio',
'label' => 'Morning',
'name' => 'delivery_time',
'value' => 'morning',
])
@endoption
@option([
'type' => 'radio',
'label' => 'Afternoon',
'name' => 'delivery_time',
'value' => 'afternoon',
])
@endoption
Value
The value parameter sets the data submitted with the form when the option is checked, allowing multiple checkboxes to share a name while returning distinct values.
<div class="c-option c-option__checkbox">
<input name="color" id="id_6aaf3c8cb4eaf" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Red" value="red" aria-checked="false" tabindex="0" label="Red"
aria-labelledby="label_id_6aaf3c8cb4eaf" /> <label for="id_6aaf3c8cb4eaf" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cb4eaf" class=
"c-option__checkbox--label-text">Red</span></label>
<div id="error_input_id_6aaf3c8cb4eaf_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="color" id="id_6aaf3c8cb4f75" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Green" value="green" aria-checked="false" tabindex="0" label=
"Green" aria-labelledby="label_id_6aaf3c8cb4f75" /> <label for="id_6aaf3c8cb4f75" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cb4f75" class=
"c-option__checkbox--label-text">Green</span></label>
<div id="error_input_id_6aaf3c8cb4f75_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div><!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="color" id="id_6aaf3c8cb502b" data-component="option" type="checkbox" class="c-option__checkbox--hidden-box" placeholder="Blue" value="blue" aria-checked="false" tabindex="0" label=
"Blue" aria-labelledby="label_id_6aaf3c8cb502b" /> <label for="id_6aaf3c8cb502b" class="c-option__checkbox--label"> <span id="label_id_6aaf3c8cb502b" class=
"c-option__checkbox--label-text">Blue</span></label>
<div id="error_input_id_6aaf3c8cb502b_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
</div>
</div>
@option([
'type' => 'checkbox',
'label' => 'Red',
'name' => 'color',
'value' => 'red',
])
@endoption
@option([
'type' => 'checkbox',
'label' => 'Green',
'name' => 'color',
'value' => 'green',
])
@endoption
@option([
'type' => 'checkbox',
'label' => 'Blue',
'name' => 'color',
'value' => 'blue',
])
@endoption
API
Parameter
Default
Type
Description
type
checkbox
string
-
label
string
-
required
false
boolean
-
value
string
-
checked
false
boolean
-
name
null
?string
-
CSS API
Variable
Default
Type
Values
Description
--c-option--base
var(--base)
range
-
Main unit that drives radius and spacing scales.
--c-option--border-radius
var(--border-radius)
range
-
Border Radius
--c-option--color--primary
var(--color--primary)
color
-
Primary
--c-option--color--surface
var(--color--surface)
color
-
Surface
--c-option--color--danger
var(--color--danger)
color
-
Danger
--c-option--color--success
var(--color--success)
color
-
Success
--c-option--font-size-100
var(--font-size-100)
range
-
Base font size.
--c-option--color--surface-contrast
var(--color--surface-contrast)
color
-
Used for text and icons on surface backgrounds with less contrast.
--c-option--color--danger-contrast
var(--color--danger-contrast)
color
-
Danger Contrast
