ChoiceList

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

Anchor to propertiesProperties

Anchor to details details 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.
Anchor to disabled disabled boolean: Disables the field, disallowing any interaction.

disabled on any child choices is ignored when this is true.
Anchor to error error 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.
Anchor to label label 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.
Anchor to multiple multiple boolean: Whether multiple choices can be selected.
Anchor to name name string: An identifier for the field that is unique within the nearest containing form.
Anchor to values values 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?

Anchor to eventsEvents

Learn more about registering events.

Anchor to change change <typeof tagName> | null
Anchor to input input <typeof tagName> | null

Was this section helpful?

Anchor to choiceChoice

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

Anchor to accessibilityLabel accessibilityLabel 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.
Anchor to defaultSelected defaultSelected boolean: Whether the control is active by default.
Anchor to disabled disabled boolean: Disables the control, disallowing any interaction.
Anchor to selected selected boolean: Whether the control is active.
Anchor to value value string: The value used in form data when the control is checked.

Was this section helpful?

Anchor to slotsSlots

Anchor to details details HTMLElement

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 value="hidden">Hidden</s-choice>

<s-choice value="optional">Optional</s-choice>

<s-choice value="required">Required</s-choice>

</s-choice-list>

Examples

Code

Default

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

ChoiceList

Anchor to propertiesProperties

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to choiceChoice

Anchor to slotsSlots

Code

Examples

Code

Default

Preview