Krizaka UI
Krizaka UI
Components

Radio group

One choice among a few options, all visible: dots with their words, whole cards, tactile keys that press in, or a segmented control.

Web + MobileBetaForms

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Orazaka.

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.
  • RadioGroup.Button (variant="buttons") for short, tactile choices made in a tap: a size, a tip, a level.
  • RadioGroup.Segment (variant="segmented") for two to four short choices of a form on one line: a billing period, a unit.

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 @krizaka/tailwind @krizaka/tokens 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.

Cards

Whole cards: the chosen one carries the accent.

Horizontal

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

Tactile keys

variant="buttons": keys raised on their ledge, pressed in while held — the chosen one stays sunk.

Segmented

variant="segmented": one light glides to the chosen segment.

Props

RadioGroupRoot

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

PropTypeDefaultDescription
invalidboolean—Marks every radio invalid: aria-invalid (pair it with a Field.Error).
labelstring—The group's accessible name — passed translated (or aria-labelledby a visible heading).
variant"list" | "buttons" | "cards" | "segmented"listThe layout of the radios: list (dots), cards (a grid of Cards), buttons (a row of tactile Buttons), or segmented (a track of Segments, one light gliding to the choice).

RadioGroupItem

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

PropTypeDefaultDescription
childrenReactNode—The words next to the dot, clickable. Otherwise name it with Field.Label htmlFor or aria-label.

RadioGroupButton

A tactile key: raised on its ledge, pressed in while held and once chosen — sizes, a tip, a level.

PropTypeDefaultDescription
hintReactNode—A second line under the words ("+15 %"), part of the radio's name.

Accessibility

  • Radix RadioGroup: role="radiogroup" named by label, role="radio" with aria-checked on each option.
  • Disabled options are skipped by the arrows.
  • A tactile key’s hint is part of its name; the pressed look follows the checked state, never colour alone (it sinks).

Keyboard

KeysAction
TabMoves into the group (one tab stop, on the chosen option) and out of it.
Arrow keysMove 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 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub

OTP input

Previous

Search field

Next

On this page

When to useInstallationExamplesPropsAccessibilityBest practicesRelated components