SGDS Radio Component Skill

<sgds-radio-group> wraps <sgds-radio> elements as a mutually exclusive selection group. Set a pre-selected value via the group's value attribute. Listen to sgds-change on the group to get the selected value.

Prerequisites

See sgds-components-setup for installation and framework integration (React 19+ vs React ≤18, Vue, Angular).

No CSS styling modifications — custom properties and CSS parts are not exposed on this component.

Quick Decision Guide

Ensure only one option is selected? → Always wrap in <sgds-radio-group>

Pre-select a value? → Set value on <sgds-radio-group> to match a radio's value

Show validation feedback? → Set hasFeedback and invalidFeedback on the group

Disable one option? → Add disabled to the specific <sgds-radio>