Radio Group

18px radios whose dot pops in, laid out as clickable rows with helper text.

TypeScript Source with Startup & Business plans Light & dark

FreeFor trying things outProFor shipping to customersTeamShared workspaces and SSO

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { RadioRows } from '@/components/component-kit/items/radio-rows';
2
3export function Example() {
4  return (
5    <RadioRows
6      aria-label="Plan"
7      defaultValue="pro"
8      options={[
9        { value: 'free', label: 'Free', description: 'For trying things out' },
10        { value: 'pro', label: 'Pro', description: 'For shipping to customers' },
11      ]}
12    />
13  );
14}

Props

Radio Group properties
Prop	Type	Default	Description
`options`	`RadioRowOption[]`	`—`	Options with a value, label and optional description or disabled flag.
`value`	`string`	`—`	Controlled value; use with onValueChange.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { RadioRows } from '@/components/component-kit/items/radio-rows';
2
3export function Example() {
4  return (
5    <RadioRows
6      aria-label="Plan"
7      defaultValue="pro"
8      options={[
9        { value: 'free', label: 'Free', description: 'For trying things out' },
10        { value: 'pro', label: 'Pro', description: 'For shipping to customers' },
11      ]}
12    />
13  );
14}

Prop

Type

Default

Description

options

RadioRowOption[]

—

Options with a value, label and optional description or disabled flag.

value

string

—

Controlled value; use with onValueChange.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { RadioRows } from '@/components/component-kit/items/radio-rows';
2
3export function Example() {
4  return (
5    <RadioRows
6      aria-label="Plan"
7      defaultValue="pro"
8      options={[
9        { value: 'free', label: 'Free', description: 'For trying things out' },
10        { value: 'pro', label: 'Pro', description: 'For shipping to customers' },
11      ]}
12    />
13  );
14}

Prop

Type

Default

Description

options

RadioRowOption[]

—

Options with a value, label and optional description or disabled flag.

value

string

—

Controlled value; use with onValueChange.

Radio Group

18px radios whose dot pops in, laid out as clickable rows with helper text.

TypeScript Source with Startup & Business plans Light & dark

FreeFor trying things outProFor shipping to customersTeamShared workspaces and SSO

Interactive preview · desktop · dark

Installation

Installation is available on the Startup and Business plans. Your personal install command appears here once you have access.

Usage

Import it, pass your props, and make it part of your product.

example.tsx

1import { RadioRows } from '@/components/component-kit/items/radio-rows';
2
3export function Example() {
4  return (
5    <RadioRows
6      aria-label="Plan"
7      defaultValue="pro"
8      options={[
9        { value: 'free', label: 'Free', description: 'For trying things out' },
10        { value: 'pro', label: 'Pro', description: 'For shipping to customers' },
11      ]}
12    />
13  );
14}

Props

Radio Group properties
Prop	Type	Default	Description
`options`	`RadioRowOption[]`	`—`	Options with a value, label and optional description or disabled flag.
`value`	`string`	`—`	Controlled value; use with onValueChange.