Radio Group

Installation

npx shadcn@latest add https://liqui.design/r/radio-group.json

Installing more than one? Register the namespace once in components.json and drop the URLs:

{
  "registries": {
    "@liqui-design": "https://liqui.design/r/{name}.json"
  }
}

npx shadcn@latest add @liqui-design/radio-group

Usage

import { Radio, RadioGroup, RadioLabel } from '@/components/ui/radio-group';

<RadioGroup value={quality} onValueChange={setQuality} aria-label="Export quality">
  <RadioLabel>
    <Radio value="fast" />
    Fast
  </RadioLabel>
  <RadioLabel>
    <Radio value="balanced" />
    Balanced
  </RadioLabel>
</RadioGroup>

RadioLabel is a plain <label> row, so the whole line is the hit area, and it dims itself through has-[[data-disabled]] rather than being told about the radio's state — the same wrapper Checkbox ships.

Inside a Field, give RadioGroup the name and let the field supply the label and error; the group is a Base UI form control like any other.

Notes

It is not glass

A radio is Checkbox in a circle: --lq-control with a hairline at rest, --lq-accent when it is the one selected, and no backdrop filter behind either.

'bg-[var(--lq-control)] shadow-[inset_0_0_0_1px_var(--lq-control-rim)]',
'data-[checked]:bg-[var(--lq-accent)] data-[checked]:shadow-none',

Which option you picked is as literal a value as this library has — it is one bit of a choice — and a value gets a solid fill.

It also collapses two things that used to have to agree. rounded-full was the shape of the DOM element while radius: 10 was the shape the displacement map was generated for, and setting one without the other gave you a circle lit like a square. There is one shape declaration now.

The group is still not a surface

That part predates the flattening and survives it.

Toggle Group is one glass strip whose toggles go flat inside it. A radio group looks like it should get the same treatment and does not: a toggle group's children share one box — they sit against each other inside a single strip, so there is a surface that can hold a lens — while a radio group is a list. Each option is a small box with text beside it and a gap under it, and the group has no box of its own. A surface drawn around it would be a card the options happen to be lying on, which is a different component.

So RadioGroup renders as a plain flex column, and Fieldset is what you reach for when the group genuinely wants a panel.

The dot

Flat white, 7px, no shadow. It used to have a cast one, because the glass layers underneath gave a child no depth of its own to lift off — there is nothing left to lift off of, and a drop shadow inside a 20px solid circle is a smudge.