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.

Accept terms and conditions

<div class="c-option c-option__checkbox">
  <input name="terms" id="id_6a44f08d54c4d" data-uid="6a44f08d54c61" 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_6a44f08d54c4d" /> <label for="id_6a44f08d54c4d" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d54c4d" class="c-option__checkbox--label-text">Accept terms and conditions</span></label>
  <div id="error_input_id_6a44f08d54c4d_message" class="c-option__input-invalid-message">
    <!-- icon.blade.php -->
  </div>
</div>

Radio buttons

Radio buttons sharing the same name attribute form a group where only one option can be selected at a time.

Option A

Option B

Option C

<div class="c-option c-option__radio">
  <input name="choice" id="id_6a44f08d555a3" data-uid="6a44f08d555b1" 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_6a44f08d555a3" /> <label for="id_6a44f08d555a3" class="c-option__radio--label"> <span id="label_id_6a44f08d555a3" class=
  "c-option__radio--label-text">Option A</span></label>
  <div id="error_input_id_6a44f08d555a3_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_6a44f08d556ad" data-uid="6a44f08d556b6" 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_6a44f08d556ad" /> <label for="id_6a44f08d556ad" class="c-option__radio--label"> <span id="label_id_6a44f08d556ad" class=
  "c-option__radio--label-text">Option B</span></label>
  <div id="error_input_id_6a44f08d556ad_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_6a44f08d55790" data-uid="6a44f08d55799" 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_6a44f08d55790" /> <label for="id_6a44f08d55790" class="c-option__radio--label"> <span id="label_id_6a44f08d55790" class=
  "c-option__radio--label-text">Option C</span></label>
  <div id="error_input_id_6a44f08d55790_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.

Pre-checked checkbox

Pre-selected radio

<div class="c-option c-option__checkbox">
  <input name="newsletter" id="id_6a44f08d55bcc" data-uid="6a44f08d55bd9" 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_6a44f08d55bcc" /> <label for="id_6a44f08d55bcc" class="c-option__checkbox--label">
  <span id="label_id_6a44f08d55bcc" class="c-option__checkbox--label-text">Pre-checked checkbox</span></label>
  <div id="error_input_id_6a44f08d55bcc_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_6a44f08d55cd9" data-uid="6a44f08d55ce2" 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_6a44f08d55cd9" /> <label for="id_6a44f08d55cd9" class="c-option__radio--label"> <span id=
  "label_id_6a44f08d55cd9" class="c-option__radio--label-text">Pre-selected radio</span></label>
  <div id="error_input_id_6a44f08d55cd9_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.

I agree to the privacy policy

Yes, I confirm

<div class="c-option c-option__checkbox">
  <input name="privacy" id="id_6a44f08d560f3" data-uid="6a44f08d560ff" 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_6a44f08d560f3" />
  <label for="id_6a44f08d560f3" class="c-option__checkbox--label"> <span id="label_id_6a44f08d560f3" class="c-option__checkbox--label-text">I agree to the privacy policy</span></label>
  <div id="error_input_id_6a44f08d560f3_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_6a44f08d561f6" data-uid="6a44f08d561ff" 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_6a44f08d561f6" /> <label for="id_6a44f08d561f6" class=
  "c-option__radio--label"> <span id="label_id_6a44f08d561f6" class="c-option__radio--label-text">Yes, I confirm</span></label>
  <div id="error_input_id_6a44f08d561f6_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.

Disabled unchecked

Disabled checked

Disabled radio

<div class="c-option is-disabled c-option__checkbox">
  <input disabled="disabled" name="disabledCheck" id="id_6a44f08d5665a" data-uid="6a44f08d56668" 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_6a44f08d5665a" /> <label for="id_6a44f08d5665a" class=
  "c-option__checkbox--label"> <span id="label_id_6a44f08d5665a" class="c-option__checkbox--label-text">Disabled unchecked</span></label>
  <div id="error_input_id_6a44f08d5665a_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_6a44f08d5675e" data-uid="6a44f08d56768" 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_6a44f08d5675e" /> <label for="id_6a44f08d5675e" class=
  "c-option__checkbox--label"> <span id="label_id_6a44f08d5675e" class="c-option__checkbox--label-text">Disabled checked</span></label>
  <div id="error_input_id_6a44f08d5675e_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_6a44f08d5683d" data-uid="6a44f08d56847" 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_6a44f08d5683d" /> <label for="id_6a44f08d5683d" class="c-option__radio--label"> <span id=
  "label_id_6a44f08d5683d" class="c-option__radio--label-text">Disabled radio</span></label>
  <div id="error_input_id_6a44f08d5683d_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.

Invalid checkbox

Invalid radio

<div class="c-option is-invalid c-option__checkbox">
  <input name="invalidCheck" id="id_6a44f08d56c62" data-uid="6a44f08d56c6f" 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_6a44f08d56c62" /> <label for="id_6a44f08d56c62" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d56c62" class="c-option__checkbox--label-text">Invalid checkbox</span></label>
  <div id="error_input_id_6a44f08d56c62_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_6a44f08d56d5c" data-uid="6a44f08d56d65" 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_6a44f08d56d5c" /> <label for="id_6a44f08d56d5c" class="c-option__radio--label"> <span id="label_id_6a44f08d56d5c"
  class="c-option__radio--label-text">Invalid radio</span></label>
  <div id="error_input_id_6a44f08d56d5c_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.

Valid checkbox

Valid radio

<div class="c-option is-valid c-option__checkbox">
  <input name="validCheck" id="id_6a44f08d57154" data-uid="6a44f08d57162" 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_6a44f08d57154" /> <label for="id_6a44f08d57154" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d57154" class="c-option__checkbox--label-text">Valid checkbox</span></label>
  <div id="error_input_id_6a44f08d57154_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_6a44f08d57251" data-uid="6a44f08d5725b" 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_6a44f08d57251" /> <label for="id_6a44f08d57251" class="c-option__radio--label"> <span id=
  "label_id_6a44f08d57251" class="c-option__radio--label-text">Valid radio</span></label>
  <div id="error_input_id_6a44f08d57251_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.

Small checkbox

Default size checkbox

<div class="c-option c-option--sm c-option__checkbox">
  <input name="sizeSmCheck" id="id_6a44f08d576d9" data-uid="6a44f08d576e7" 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_6a44f08d576d9" /> <label for="id_6a44f08d576d9" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d576d9" class="c-option__checkbox--label-text">Small checkbox</span></label>
  <div id="error_input_id_6a44f08d576d9_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_6a44f08d577d6" data-uid="6a44f08d577df" 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_6a44f08d577d6" /> <label for="id_6a44f08d577d6" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d577d6" class="c-option__checkbox--label-text">Default size checkbox</span></label>
  <div id="error_input_id_6a44f08d577d6_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.

Subscribe to newsletter

Morning

Afternoon

<div class="c-option c-option__checkbox">
  <input name="newsletter_opt_in" id="id_6a44f08d57bb5" data-uid="6a44f08d57bc2" 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_6a44f08d57bb5" /> <label for="id_6a44f08d57bb5" class="c-option__checkbox--label"> <span id=
  "label_id_6a44f08d57bb5" class="c-option__checkbox--label-text">Subscribe to newsletter</span></label>
  <div id="error_input_id_6a44f08d57bb5_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_6a44f08d57cc3" data-uid="6a44f08d57ccc" 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_6a44f08d57cc3" /> <label for="id_6a44f08d57cc3" class="c-option__radio--label"> <span id="label_id_6a44f08d57cc3" class=
  "c-option__radio--label-text">Morning</span></label>
  <div id="error_input_id_6a44f08d57cc3_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_6a44f08d57d9e" data-uid="6a44f08d57da7" 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_6a44f08d57d9e" /> <label for="id_6a44f08d57d9e" class="c-option__radio--label"> <span id="label_id_6a44f08d57d9e"
  class="c-option__radio--label-text">Afternoon</span></label>
  <div id="error_input_id_6a44f08d57d9e_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.

Red

Green

Blue

<div class="c-option c-option__checkbox">
  <input name="color" id="id_6a44f08d5818d" data-uid="6a44f08d5819a" 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_6a44f08d5818d" /> <label for="id_6a44f08d5818d" class="c-option__checkbox--label"> <span id="label_id_6a44f08d5818d" class=
  "c-option__checkbox--label-text">Red</span></label>
  <div id="error_input_id_6a44f08d5818d_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_6a44f08d58284" data-uid="6a44f08d5828d" 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_6a44f08d58284" /> <label for="id_6a44f08d58284" class="c-option__checkbox--label"> <span id="label_id_6a44f08d58284" class=
  "c-option__checkbox--label-text">Green</span></label>
  <div id="error_input_id_6a44f08d58284_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_6a44f08d58363" data-uid="6a44f08d5836c" 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_6a44f08d58363" /> <label for="id_6a44f08d58363" class="c-option__checkbox--label"> <span id="label_id_6a44f08d58363" class=
  "c-option__checkbox--label-text">Blue</span></label>
  <div id="error_input_id_6a44f08d58363_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	Description
type	checkbox	Type of option. Can be checkbox or radio.
label		Array of label items like labelText.
required	false	HTML5 validation on fields
value		option value
checked	false	Set parameter to true if option should be checked on load
name	null	Name of the option. If not set, the name will be set to the label name.

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

Similar components

Collection Pagination Icon