Choice
<sc-choice></sc-choice>
Choice buttons allow selection of a single or multiple options from a set of predefined options. They are a good alternative to radio buttons, checkboxes, and select menus.
info
Choice components must be wrapped in the <sc-choices></sc-choices> component.
- Preview
- Code
<sc-choices><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>
Checkbox Type
In addition to a radio style selector, you can also choose a checkbox. This lets you change the behavior from selecting one option from many, to selecting any number of options, or none at all.
- Preview
- Code
<sc-choices><sc-choice type="checkbox">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 type="checkbox">Bronze Plan<span slot="description">$9.99 per month</span></sc-choice></sc-choices>
Disabled Choices
- Preview
- Code
<sc-choices><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 disabled>Bronze Plan<span slot="description">$9.99 per month</span></sc-choice></sc-choices>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| checked | Draws the choice in a checked state. | boolean | false |
| disabled | Is the choice disabled | boolean | false |
| invalid | This will be true when the control is in an invalid state. Validity is determined by the `required` prop. | boolean | false |
| name | The choice name attribute | string | |
| required | Is this required | boolean | false |
| showControl | Show the radio/checkbox control | boolean | true |
| showLabel | Show the label | boolean | true |
| showPrice | Show the price | boolean | true |
| size | The size. | "large" | "medium" | "small" | 'medium' |
| type | The choice name attribute | "checkbox" | "radio" | 'radio' |
| value | The choice value | string |
Events
| Event | Description | Type |
|---|---|---|
scBlur | Emitted when the control loses focus. | CustomEvent<void> |
scChange | Emitted when the control's checked state changes. | CustomEvent<boolean> |
scFocus | Emitted when the control gains focus. | CustomEvent<void> |
Methods
reportValidity() => Promise<boolean>
Checks for validity and shows the browser's validation message if the control is invalid.
setCustomValidity(message: string) => Promise<void>
Sets a custom validation message. If `message` is not empty, the field will be considered invalid.
triggerClick() => Promise<void>
Simulates a click on the choice.
triggerFocus() => Promise<void>
Shadow Parts
| Part | Description |
|---|---|
base | |
checked-icon | |
content | |
control | |
description | |
label | |
title |