Krizaka UI
Krizaka UI
Composants

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 + MobileBêtaFormulaires

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orazaka.

Quand l’utiliser

  • 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.

Quand ne pas l’utiliser

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

Installation

Installer

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

Styles

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

Importer

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

Exemples

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.

PropTypeDéfautDescription
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.

PropTypeDéfautDescription
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.

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

Accessibilité

  • 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).

Clavier

TouchesAction
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.

Bonnes pratiques

  • 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.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

OTP input

Précédent

Search field

Suivant

Sur cette page

Quand l’utiliserInstallationExemplesPropsAccessibilitéBonnes pratiquesComposants liés