Radio Group
A group of radio inputs that lets users select exactly one option from a set.
Default
<diwa-radio-group label="Pick a size" value="m" theme="dark">
<diwa-radio-group-item value="s">Small</diwa-radio-group-item>
<diwa-radio-group-item value="m">Medium</diwa-radio-group-item>
<diwa-radio-group-item value="l">Large</diwa-radio-group-item>
</diwa-radio-group>Horizontal layout
Set direction="row" to arrange options side by side. Useful for short option lists.
<diwa-radio-group label="Color theme" value="default" direction="row" theme="dark">
<diwa-radio-group-item value="default">Default</diwa-radio-group-item>
<diwa-radio-group-item value="warm">Warm</diwa-radio-group-item>
<diwa-radio-group-item value="cool">Cool</diwa-radio-group-item>
</diwa-radio-group>Compact
Reduces the radio control size and tightens the spacing between options for dense layouts, while keeping the label typography unchanged.
<diwa-radio-group label="Pick a size" value="m" compact theme="dark">
<diwa-radio-group-item value="s">Small</diwa-radio-group-item>
<diwa-radio-group-item value="m">Medium</diwa-radio-group-item>
<diwa-radio-group-item value="l">Large</diwa-radio-group-item>
</diwa-radio-group>Compact horizontal
Compact and horizontal can be combined to reduce visual footprint without shrinking the label text.
<diwa-radio-group label="Color theme" value="default" direction="row" compact theme="dark">
<diwa-radio-group-item value="default">Default</diwa-radio-group-item>
<diwa-radio-group-item value="warm">Warm</diwa-radio-group-item>
<diwa-radio-group-item value="cool">Cool</diwa-radio-group-item>
</diwa-radio-group>Error state
Set state="error" with a message to surface validation feedback.
<diwa-radio-group label="Plan" value="" state="error" message="Please select a plan to continue." theme="dark">
<diwa-radio-group-item value="starter">Starter</diwa-radio-group-item>
<diwa-radio-group-item value="pro">Pro</diwa-radio-group-item>
</diwa-radio-group>Success state
Set state="success" to confirm a valid selection.
<diwa-radio-group label="Plan" value="pro" state="success" message="Great choice!" theme="dark">
<diwa-radio-group-item value="starter">Starter</diwa-radio-group-item>
<diwa-radio-group-item value="pro">Pro</diwa-radio-group-item>
</diwa-radio-group>Disabled
<diwa-radio-group label="Locked selection" value="m" disabled theme="dark">
<diwa-radio-group-item value="s">Small</diwa-radio-group-item>
<diwa-radio-group-item value="m">Medium</diwa-radio-group-item>
<diwa-radio-group-item value="l">Large</diwa-radio-group-item>
</diwa-radio-group>