Radio

Selects one option from a group. The selected dot fills with ink.

Preview

MonthlyYearly

In action

Stock

The stock

One choice. The rest stay quiet.

PaperBoard

When to use

Use it for

One choice from two to six visible options.
Choices that should all be readable at once.

Not for

Many options; use Select.
Independent on and off choices; use Checkbox.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Radio, RadioGroup } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/radio.

2. Vendor the source

npx @noorddev/vlak-cli add radio

The StyleX leaf lands in components/vlak/, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/radio.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { useState } from "react";
import { Radio, RadioGroup } from "@noorddev/vlak-react";

const [plan, setPlan] = useState("monthly");

<RadioGroup aria-label="Billing" value={plan} onValueChange={setPlan}>
  <Radio value="monthly" label="Monthly" />
  <Radio value="yearly" label="Yearly" />
</RadioGroup>

Props

Radio

A real native radio inside a RadioGroup; the ink dot mirrors its state.

Prop	Type	Default	Description
`value`required	`string`
`label`	`ReactNode`

Also accepts Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value">.

RadioGroup

Prop	Type	Default	Description
`name`	`string`
`value`	`string`
`defaultValue`	`string`
`onValueChange`	`(value: string) => void`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "onChange">.

Keyboard

Keys	Does
`Tab`	Moves focus into the group, onto the checked radio
`Arrow up, Arrow down, Arrow left, Arrow right`	Moves the selection
`Space`	Selects the focused radio

Accessibility

RadioGroup renders role="radiogroup"; pass aria-label or aria-labelledby to name it.
Radio is a native <input type="radio"> hidden from view inside a <label>; the ink dot mirrors its state.
The group shares a generated name unless you pass one.

Markup

<label class="rs-radio"><span class="rs-radio-dot rs-radio-on"></span>Monthly</label>

Classes

.rs-radio.rs-radio-dot.rs-radio-on.rs-radio-fill