Radio Group

Pick one option on Base UI RadioGroup and Radio; selected is an ink fill with a paper dot.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Delivery

Morning editionEvening editionWeekly digest

Install

bash

npx shadcn add @eloquent/radio-group

Usage

tsx

import { Label } from "@/components/ui/label";
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

<span id="delivery-legend" className="kicker">Delivery</span>
<RadioGroup aria-labelledby="delivery-legend" name="delivery" defaultValue="morning">
  <Label><RadioGroupItem value="morning" />Morning edition</Label>
  <Label><RadioGroupItem value="evening" />Evening edition</Label>
</RadioGroup>

Label the group with aria-labelledby (or a FieldSet and FieldLegend) and each item with a wrapping Label.

States

UnselectedSelected

DisabledDisabled, selected

State	Treatment
Unselected	Paper fill, 1px ink border
Selected	Solid ink fill and a paper dot
Focus	2px ink outline, 2px offset
Invalid	2px ink border, plus the Field's rule and message
Disabled	Halftone border and dot, `cursor-not-allowed`

Keyboard

Key	Action
Tab / Shift+Tab	Enter the group on the selected item (or the first), and leave it
Arrow Down / Right	Move focus to the next item and select it
Arrow Up / Left	Move focus to the previous item and select it
Space	Select the focused item

A disabled group keeps its selected item focusable (Base UI behaviour) but nothing can change.

Vietnamese

Phương thức nhận tin

Bản tin buổi sángBản tin buổi tốiBản tổng hợp hằng tuần

Ink adaptation

Upstream shadcn's round container, shadow and ring glow are removed: the box is square (radius is 0) and only the dot is a circle. The 20px box sits in a 44px pointer target built from an ::after layer. There is no hover treatment. Built on Base UI RadioGroup and Radio.