Radio group

One choice among a few options, all visible: dots with their words, or whole cards.

WebBetaForms

Web only — React, from @krizaka/ui/radio-group. Beta: its API may still change in a minor version.

When to use

In a form, to choose exactly one of two to five options that should all be seen: a frequency, a quality.
RadioGroup.Card when each option needs more than a line: an amount, a plan, a payment method.

When not to use

For many options (a country).Use instead: Field
For independent options that can all be chosen.Use instead: Checkbox
To filter a list at once, without a form.Use instead: Chip
To switch between views.Use instead: Tabs

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { RadioGroup } from "@krizaka/ui/radio-group";

Examples

Items

Dots and their words, one disabled.

InstantlyOnce a dayOnce a weekNever

import { RadioGroup } from "@krizaka/ui/radio-group";

export default function RadioGroupItems() {
  return (
    <RadioGroup.Root label="Notification frequency" defaultValue="daily">
      <RadioGroup.Item value="instant">Instantly</RadioGroup.Item>
      <RadioGroup.Item value="daily">Once a day</RadioGroup.Item>
      <RadioGroup.Item value="weekly">Once a week</RadioGroup.Item>
      <RadioGroup.Item value="never" disabled>
        Never
      </RadioGroup.Item>
    </RadioGroup.Root>
  );
}

Cards

Whole cards: the chosen one carries the accent.

import { RadioGroup } from "@krizaka/ui/radio-group";

const AMOUNTS = [
  ["5", "$5", "A coffee"],
  ["20", "$20", "A dinner"],
  ["50", "$50", "A night out"],
];

// Whole cards: the chosen one carries the accent border and tint.
export default function RadioGroupCards() {
  return (
    <RadioGroup.Root label="Amount" defaultValue="20" className="grid w-[30rem] max-w-full grid-cols-3 gap-3">
      {AMOUNTS.map(([value, amount, hint]) => (
        <RadioGroup.Card key={value} value={value}>
          <span className="font-display text-lg font-bold">{amount}</span>
          <span className="text-xs text-fg-secondary">{hint}</span>
        </RadioGroup.Card>
      ))}
    </RadioGroup.Root>
  );
}

Horizontal

orientation="horizontal": the items in a row.

720p1080p4K

import { RadioGroup } from "@krizaka/ui/radio-group";

// `orientation="horizontal"`: left and right arrows, the items in a row.
export default function RadioGroupHorizontal() {
  return (
    <RadioGroup.Root label="Quality" defaultValue="1080" orientation="horizontal" className="gap-5">
      <RadioGroup.Item value="720">720p</RadioGroup.Item>
      <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
      <RadioGroup.Item value="2160">4K</RadioGroup.Item>
    </RadioGroup.Root>
  );
}

Props

RadioGroupRoot

value/defaultValue + onValueChange, orientation, required, name for a form.

Prop	Type	Default	Description
`invalid`	`boolean`	—	Marks every radio invalid: aria-invalid (pair it with a `Field.Error`).
`label`	`string`	—	The group's accessible name — passed translated (or `aria-labelledby` a visible heading).

RadioGroupItem

A radio: a dot, and its words when given.

Prop	Type	Default	Description
`children`	`ReactNode`	—	The words next to the dot, clickable. Otherwise name it with `Field.Label htmlFor` or `aria-label`.

Accessibility

Radix RadioGroup: role="radiogroup" named by label, role="radio" with aria-checked on each option.
Disabled options are skipped by the arrows.

Keyboard

Keys	Action
`Tab`	Moves into the group (one tab stop, on the chosen option) and out of it.
`Arrow keys`	Move to the next or previous option and choose it.

Best practices

Give the group a label: the question being answered.
Pre-select the safest or most common option with defaultValue when there is one.
Keep the labels parallel and short.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Field

A form field: a label, a hint and an error around an Input, a Textarea or a native Select.

Slider

A value or a range chosen by dragging a thumb along a track, with arrows and Page keys.