Skip to main content

ChoiceList

Present multiple options to users, allowing either single selections with radio buttons or multiple selections with checkboxes.

string

Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.

boolean

Disables the field, disallowing any interaction.

disabled on any child choices is ignored when this is true.

string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

string

Content to use as the field label.

Anchor to labelAccessibilityVisibility
labelAccessibilityVisibility
"visible" | "exclusive"

Changes the visibility of the component's label.

  • visible: the label is visible to all users.
  • exclusive: the label is visually hidden but remains in the accessibility tree.
boolean

Whether multiple choices can be selected.

string

An identifier for the field that is unique within the nearest containing form.

string[]

An array of the values of the selected options.

This is a convenience prop for setting the selected prop on child options.

Was this section helpful?

Create options that let users select one or multiple items from a list of choices.

string

A label used for users using assistive technologies like screen readers. When set, any children or label supplied will not be announced. This can also be used to display a control without a visual label, while still providing context to users using screen readers.

boolean

Whether the control is active by default.

string

Additional text to provide context or guidance for the input.

This text is displayed along with the input and its label to offer more information or instructions to the user.

boolean

Disables the control, disallowing any interaction.

string

Content to use as the choice label.

boolean

Whether the control is active.

string

The value used in form data when the control is checked.

Was this section helpful?

Learn more about registering events.

<typeof tagName> | null
<typeof tagName> | null
Was this section helpful?

Code

<s-choice-list
label="Company name"
name="Company name"
details="The company name will be displayed on the checkout page."
>
<s-choice label="Hidden" value="hidden"></s-choice>
<s-choice label="Optional" value="optional"></s-choice>
<s-choice label="Required" value="required"></s-choice>
</s-choice-list>

Preview