Choices

<sc-choices></sc-choices>

This component let users create choices container.

Preview

<sc-choices label="Choose one">
    <sc-choice>
        Gold Plan
        <span slot="description">$9.99, then $49.99 per month</span>
    </sc-choice>
    <sc-choice checked>
        Silver Plan
        <span slot="description">$39.99 per month</span>
    </sc-choice>
    <sc-choice>
        Bronze Plan
        <span slot="description">$9.99 per month</span>
    </sc-choice>
</sc-choices>

Code

Gold Plan$9.99, then $49.99 per monthSilver Plan$39.99 per monthBronze Plan$9.99 per month

Component Codex

Properties

Property	Description	Type	Default
autoWidth		boolean
columns	Number of columns on desktop	number	1
errorMessage	Validation error message.	string	''
help	The input's help text.	string	''
hideLabel	Hides the fieldset and legend that surrounds the group. The label will still be read by screen readers.	boolean	false
label	The group label. Required for proper accessibility. Alternatively, you can use the label slot.	string	''
required	Required	boolean	false
showLabel	Should we show the label	boolean	true
size	Input size	"large" | "medium" | "small"	'medium'

Methods

triggerFocus() => Promise<void>

Shadow Parts

Part	Description
base	The elements base wrapper.
choices	The choices wrapper.
form-control	The form control wrapper.
help-text	Help text that describes how to use the input.
label	The input label.

Used By

• sc-cancel-survey
• sc-checkout-product-price-variant-selector
• sc-donation-choices
• sc-price-choices
• sc-product-price-choices
• sc-subscription-payment
• sc-subscription-payment-method
• sc-subscription-switch

Uses

• sc-form-control