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.

Radio buttons

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

Pre-checked state

Setting the checked parameter to true renders the option pre-selected on load, for both checkbox and radio types.

Required

Setting required to true adds HTML5 validation attributes so the field must be interacted with before the form can be submitted.

Disabled

Adding the is-disabled class via classList together with the disabled HTML attribute visually disables the option and prevents interaction.

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.

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.

Small size

Adding the c-option--sm modifier class via classList renders a smaller checkbox box and label font size.

Custom name

The name parameter sets the HTML name attribute on the input; when omitted, the name is derived automatically from the label text.

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.

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

Similar components

Collection Pagination Icon