Radio Group
<sc-radio-group></sc-radio-group>
This component let users create radio group for holding multiple radio option.
- Preview
- Code
<sc-radio-group label="Choose an Option" no-fieldset><sc-radio value="1" name="test" checked>Option 1</sc-radio><sc-radio value="2" name="test">Option 2</sc-radio><sc-radio value="3" name="test" disabled>Option 3</sc-radio></sc-radio-group>
Component Codex
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| invalid | This will be true when the control is in an invalid state. Validity is determined by props such as `type`, `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API. | boolean | |
| label | The radio group label. Required for proper accessibility. | string | '' |
| required | Is one of these items required. | boolean | |
| value | The selected value of the control. | string | '' |
Events
| Event | Description | Type |
|---|---|---|
scChange | CustomEvent<string> |
Methods
reportValidity() => Promise<boolean>
Checks for validity and shows the browser's validation message if the control is invalid.
Shadow Parts
| Part | Description |
|---|---|
base | |
items | |
label |