Radio

<sc-radio></sc-radio>

This component lets the user select one option from a group of many.

Preview

<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>

Code

Option 1Option 2Option 3

Component Codex

Properties

Property	Description	Type	Default
checked	Draws the radio in a checked state.	boolean	false
disabled	Is the radio disabled	boolean	false
edit	This will be true as a workaround in the block editor to focus on the content.	boolean
invalid	This will be true when the control is in an invalid state. Validity is determined by the `required` prop.	boolean	false
name	The radios name attribute	string
required	Is this required	boolean	false
value	The radios 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<void>
scFocus	Emitted when the control gains focus.	CustomEvent<void>

Methods

ceClick() => Promise<void>

Simulates a click on the radio.

reportValidity() => Promise<boolean>

Checks for validity and shows the browser's validation message if the control is invalid.

Shadow Parts

Part	Description
base	The elements base wrapper.
checked-icon	Checked icon.
control	The control wrapper.
label	The label.

Used By

• sc-shipping-choices