Radio Group

Single-choice radios — Attio's settings picker, with a card variant for the Theme selector.

A single-choice group in two shapes, measured from Attio's Settings. The default is a column of rows (a 16px ring that fills brand when selected + a label); the card variant is a row of bordered preview cards whose border turns brand (#266df0) when picked — Attio's Appearance Theme selector. Arrow keys move between options (roving focus).

Preview

Installation

bun add crisp

import "crisp/styles.css";
import { RadioGroup, Radio } from "crisp";

Usage

import { RadioGroup, Radio } from "crisp";
import * as React from "react";

function Theme() {
  const [theme, setTheme] = React.useState("light");
  return (
    <RadioGroup variant="card" value={theme} onValueChange={setTheme} aria-label="Theme">
      <Radio value="light" label="Light"><LightPreview /></Radio>
      <Radio value="dark" label="Dark"><DarkPreview /></Radio>
      <Radio value="system" label="System"><SystemPreview /></Radio>
    </RadioGroup>
  );
}

Drop the variant (and the preview children) for a plain row group:

<RadioGroup defaultValue="mon" aria-label="Start week on">
  <Radio value="mon" label="Monday" />
  <Radio value="sat" label="Saturday" />
  <Radio value="sun" label="Sunday" />
</RadioGroup>

Props

`RadioGroup`

Prop	Type	Default	Description
`value`	`string`	—	Controlled value. Omit for uncontrolled.
`defaultValue`	`string`	—	Initial value when uncontrolled.
`onValueChange`	`(value: string) => void`	—	Fires with the chosen value.
`variant`	`"default" \| "card"`	`"default"`	Row list, or bordered preview cards.
`aria-label`	`string`	—	Accessible name for the `radiogroup`.

`Radio`

Prop	Type	Description
`value`	`string`	This option's value.
`label`	`ReactNode`	The label text.
`children`	`ReactNode`	Preview content shown above the label in the `card` variant.
`disabled`	`boolean`	Dims and skips the option.

Notes

Semantics. A role="radiogroup" wrapping role="radio" buttons with aria-checked; roving tabIndex (only the selected radio is tabbable) and ↑/↓/←/→ move + select, matching the native radio pattern.
Card variant. Each card is a bordered container (radius 16) that renders your preview as children and a footer with the ring + label; the border turns brand when selected.