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.
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="terms" id="id_69f0d0c1afa92" data-uid="69f0d0c1afaa9" 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_69f0d0c1afa92"
>
<label for="id_69f0d0c1afa92" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1afa92" class="c-option__checkbox--label-text">Accept terms and conditions</span>
</label>
<div id="error_input_id_69f0d0c1afa92_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1afc2d" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="choice" id="id_69f0d0c1afd1e" data-uid="69f0d0c1afd29" 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_69f0d0c1afd1e"
>
<label for="id_69f0d0c1afd1e" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1afd1e" class="c-option__radio--label-text">Option A</span>
</label>
<div id="error_input_id_69f0d0c1afd1e_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1afd70" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="choice" id="id_69f0d0c1afdac" data-uid="69f0d0c1afdb4" 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_69f0d0c1afdac"
>
<label for="id_69f0d0c1afdac" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1afdac" class="c-option__radio--label-text">Option B</span>
</label>
<div id="error_input_id_69f0d0c1afdac_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1afded" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="choice" id="id_69f0d0c1afe21" data-uid="69f0d0c1afe27" 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_69f0d0c1afe21"
>
<label for="id_69f0d0c1afe21" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1afe21" class="c-option__radio--label-text">Option C</span>
</label>
<div id="error_input_id_69f0d0c1afe21_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1afe68" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="newsletter" id="id_69f0d0c1aff35" data-uid="69f0d0c1aff3e" data-component="option" type="checkbox"
class="c-option__checkbox--hidden-box"
placeholder="Pre-checked checkbox"
value="1"
checked aria-checked="true"
tabindex="0"
label="Pre-checked checkbox"
aria-labelledby="label_id_69f0d0c1aff35"
>
<label for="id_69f0d0c1aff35" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1aff35" class="c-option__checkbox--label-text">Pre-checked checkbox</span>
</label>
<div id="error_input_id_69f0d0c1aff35_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1aff80" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="preset" id="id_69f0d0c1affb8" data-uid="69f0d0c1affbf" data-component="option" type="radio"
class="c-option__radio--hidden-box"
placeholder="Pre-selected radio"
value="yes"
checked aria-checked="true"
tabindex="0"
label="Pre-selected radio"
aria-labelledby="label_id_69f0d0c1affb8"
>
<label for="id_69f0d0c1affb8" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1affb8" class="c-option__radio--label-text">Pre-selected radio</span>
</label>
<div id="error_input_id_69f0d0c1affb8_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0002" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="privacy" required="1" id="id_69f0d0c1b00c7" data-uid="69f0d0c1b00d1" 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_69f0d0c1b00c7"
>
<label for="id_69f0d0c1b00c7" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b00c7" class="c-option__checkbox--label-text">I agree to the privacy policy</span>
</label>
<div id="error_input_id_69f0d0c1b00c7_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0115" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="confirm" required="1" id="id_69f0d0c1b014d" data-uid="69f0d0c1b0155" 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_69f0d0c1b014d"
>
<label for="id_69f0d0c1b014d" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b014d" class="c-option__radio--label-text">Yes, I confirm</span>
</label>
<div id="error_input_id_69f0d0c1b014d_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b018e" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option is-disabled c-option__checkbox">
<input disabled="disabled" name="disabledCheck" id="id_69f0d0c1b025e" data-uid="69f0d0c1b0269" 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_69f0d0c1b025e"
>
<label for="id_69f0d0c1b025e" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b025e" class="c-option__checkbox--label-text">Disabled unchecked</span>
</label>
<div id="error_input_id_69f0d0c1b025e_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b02b7" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option is-disabled c-option__checkbox">
<input disabled="disabled" name="disabledChecked" id="id_69f0d0c1b02ec" data-uid="69f0d0c1b02f3" data-component="option" type="checkbox"
class="c-option__checkbox--hidden-box"
placeholder="Disabled checked"
value="1"
checked aria-checked="true"
tabindex="0"
label="Disabled checked"
aria-labelledby="label_id_69f0d0c1b02ec"
>
<label for="id_69f0d0c1b02ec" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b02ec" class="c-option__checkbox--label-text">Disabled checked</span>
</label>
<div id="error_input_id_69f0d0c1b02ec_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b033d" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option is-disabled c-option__radio">
<input disabled="disabled" name="disabledRadio" id="id_69f0d0c1b0372" data-uid="69f0d0c1b0379" 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_69f0d0c1b0372"
>
<label for="id_69f0d0c1b0372" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b0372" class="c-option__radio--label-text">Disabled radio</span>
</label>
<div id="error_input_id_69f0d0c1b0372_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b03b2" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option is-invalid c-option__checkbox">
<input name="invalidCheck" id="id_69f0d0c1b0464" data-uid="69f0d0c1b046e" 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_69f0d0c1b0464"
>
<label for="id_69f0d0c1b0464" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b0464" class="c-option__checkbox--label-text">Invalid checkbox</span>
</label>
<div id="error_input_id_69f0d0c1b0464_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b04ad" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option is-invalid c-option__radio">
<input name="invalidRadio" id="id_69f0d0c1b04e3" data-uid="69f0d0c1b04ea" 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_69f0d0c1b04e3"
>
<label for="id_69f0d0c1b04e3" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b04e3" class="c-option__radio--label-text">Invalid radio</span>
</label>
<div id="error_input_id_69f0d0c1b04e3_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0523" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option is-valid c-option__checkbox">
<input name="validCheck" id="id_69f0d0c1b05e1" data-uid="69f0d0c1b05e9" data-component="option" type="checkbox"
class="c-option__checkbox--hidden-box"
placeholder="Valid checkbox"
value="1"
checked aria-checked="true"
tabindex="0"
label="Valid checkbox"
aria-labelledby="label_id_69f0d0c1b05e1"
>
<label for="id_69f0d0c1b05e1" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b05e1" class="c-option__checkbox--label-text">Valid checkbox</span>
</label>
<div id="error_input_id_69f0d0c1b05e1_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b062e" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option is-valid c-option__radio">
<input name="validRadio" id="id_69f0d0c1b0663" data-uid="69f0d0c1b066a" data-component="option" type="radio"
class="c-option__radio--hidden-box"
placeholder="Valid radio"
value="x"
checked aria-checked="true"
tabindex="0"
label="Valid radio"
aria-labelledby="label_id_69f0d0c1b0663"
>
<label for="id_69f0d0c1b0663" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b0663" class="c-option__radio--label-text">Valid radio</span>
</label>
<div id="error_input_id_69f0d0c1b0663_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b069f" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option--sm c-option__checkbox">
<input name="sizeSmCheck" id="id_69f0d0c1b074a" data-uid="69f0d0c1b0753" 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_69f0d0c1b074a"
>
<label for="id_69f0d0c1b074a" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b074a" class="c-option__checkbox--label-text">Small checkbox</span>
</label>
<div id="error_input_id_69f0d0c1b074a_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0790" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="sizeMdCheck" id="id_69f0d0c1b07c3" data-uid="69f0d0c1b07c9" 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_69f0d0c1b07c3"
>
<label for="id_69f0d0c1b07c3" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b07c3" class="c-option__checkbox--label-text">Default size checkbox</span>
</label>
<div id="error_input_id_69f0d0c1b07c3_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b07fe" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="newsletter_opt_in" id="id_69f0d0c1b08ac" data-uid="69f0d0c1b08b4" 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_69f0d0c1b08ac"
>
<label for="id_69f0d0c1b08ac" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b08ac" class="c-option__checkbox--label-text">Subscribe to newsletter</span>
</label>
<div id="error_input_id_69f0d0c1b08ac_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b08ef" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="delivery_time" id="id_69f0d0c1b0922" data-uid="69f0d0c1b0928" 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_69f0d0c1b0922"
>
<label for="id_69f0d0c1b0922" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b0922" class="c-option__radio--label-text">Morning</span>
</label>
<div id="error_input_id_69f0d0c1b0922_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b095c" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__radio">
<input name="delivery_time" id="id_69f0d0c1b098c" data-uid="69f0d0c1b0992" 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_69f0d0c1b098c"
>
<label for="id_69f0d0c1b098c" class="c-option__radio--label">
<span class="c-option__radio--label-box"></span>
<span id="label_id_69f0d0c1b098c" class="c-option__radio--label-text">Afternoon</span>
</label>
<div id="error_input_id_69f0d0c1b098c_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b09c4" data-component="icon">
</span>
<span class="errorText"></span>
</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.
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="color" id="id_69f0d0c1b0b0b" data-uid="69f0d0c1b0b1b" 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_69f0d0c1b0b0b"
>
<label for="id_69f0d0c1b0b0b" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b0b0b" class="c-option__checkbox--label-text">Red</span>
</label>
<div id="error_input_id_69f0d0c1b0b0b_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0b7b" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="color" id="id_69f0d0c1b0bbe" data-uid="69f0d0c1b0bc5" 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_69f0d0c1b0bbe"
>
<label for="id_69f0d0c1b0bbe" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b0bbe" class="c-option__checkbox--label-text">Green</span>
</label>
<div id="error_input_id_69f0d0c1b0bbe_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0c01" data-component="icon">
</span>
<span class="errorText"></span>
</div>
</div>
<!-- option.blade.php -->
<div class="c-option c-option__checkbox">
<input name="color" id="id_69f0d0c1b0c38" data-uid="69f0d0c1b0c3f" 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_69f0d0c1b0c38"
>
<label for="id_69f0d0c1b0c38" class="c-option__checkbox--label">
<span class="c-option__checkbox--label-box"></span>
<span id="label_id_69f0d0c1b0c38" class="c-option__checkbox--label-text">Blue</span>
</label>
<div id="error_input_id_69f0d0c1b0c38_message" class="c-option__input-invalid-message">
<!-- icon.blade.php -->
<span class="c-icon c-icon--error c-icon--material c-icon--material-error material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-sm" data-material-symbol="error" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" aria-hidden="false" data-uid="69f0d0c1b0c76" data-component="icon">
</span>
<span class="errorText"></span>
</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
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
