radio-group

Card-style radio group with label and description per option.

status: stable js: none support: has-selector

Preview

Markup

<div class="radio-group"><label class="radio-group-item"><input type="radio" class="radio" name="X" checked><div class="radio-group-item-body"><div class="radio-group-item-label">L</div><div class="radio-group-item-description">D</div></div></label></div>

Install

Import the component CSS (depends on base/tokens.css):

@import "@russfranky/shadcss/src/components/radio-group.css";

…or copy it into your repo with the CLI:

npx @russfranky/shadcss-cli add radio-group

Accessibility

Native radios; selection via :has(:checked)

Classes

.radio-group .radio-group-item .radio-group-item-body .radio-group-item-label .radio-group-item-description

Dependencies

base/tokens radio