Skip to main content



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

Option 1Option 2Option 3

Component Codex


checkedDraws the radio in a checked state.booleanfalse
disabledIs the radio disabledbooleanfalse
editThis will be true as a workaround in the block editor to focus on the content.boolean
invalidThis will be true when the control is in an invalid state. Validity is determined by the `required` prop.booleanfalse
nameThe radios name attributestring
requiredIs this requiredbooleanfalse
valueThe radios valuestring


scBlurEmitted when the control loses focus.CustomEvent<void>
scChangeEmitted when the control's checked state changes.CustomEvent<void>
scFocusEmitted when the control gains focus.CustomEvent<void>


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

baseThe elements base wrapper.
checked-iconChecked icon.
controlThe control wrapper.
labelThe label.