Radio group
16px circle on border-input, filled primary with a primary-foreground dot when chosen, 12px between options. Two to five mutually exclusive options; more than five is a Select.
import { RadioGroup, RadioGroupItem } from "@stocklots/ui-components/components/radio-group";
<FieldSet>
<FieldLegend id="sale-form-legend">Sale form</FieldLegend>
<RadioGroup defaultValue="fixed-price" aria-labelledby="sale-form-legend">
<RadioGroupItem value="fixed-price" id="sale-form-fixed-price" />
</RadioGroup>
</FieldSet>States
Default, checked, disabled, invalid (with its message).
Choose a sale form before you continue.
Stacked list
Default RadioGroup layout: grid gap-3, 12px between options.
Choice cards
FieldLabel wraps a Field; the card's border and fill key off data-state=checked on the radio inside.