Checkbox

An 18px, 6px-radius checkbox whose check pops in, with a clickable label and helper text.

TypeScript Source with Startup & Business plans Light & dark

Remember this deviceSkip verification for 30 days.Send me product updatesAbout once a month.

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 { CheckboxRow } from '@/components/component-kit/items/checkbox-row';
2
3export function Example() {
4  return (
5    <CheckboxRow
6      label="Remember this device"
7      description="Skip verification for 30 days."
8    />
9  );
10}

Props

Checkbox properties
Prop	Type	Default	Description
`label`	`ReactNode`	`—`	Row label.
`description`	`ReactNode`	`—`	Helper text under the label.
`checked`	`boolean \| "indeterminate"`	`—`	Controlled state; use with onCheckedChange.

Usage

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

example.tsx

1import { CheckboxRow } from '@/components/component-kit/items/checkbox-row';
2
3export function Example() {
4  return (
5    <CheckboxRow
6      label="Remember this device"
7      description="Skip verification for 30 days."
8    />
9  );
10}

Prop

Type

Default

Description

label

ReactNode

—

Row label.

description

ReactNode

—

Helper text under the label.

checked

boolean | "indeterminate"

—

Controlled state; use with onCheckedChange.

Usage

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

example.tsx

1import { CheckboxRow } from '@/components/component-kit/items/checkbox-row';
2
3export function Example() {
4  return (
5    <CheckboxRow
6      label="Remember this device"
7      description="Skip verification for 30 days."
8    />
9  );
10}

Prop

Type

Default

Description

label

ReactNode

—

Row label.

description

ReactNode

—

Helper text under the label.

checked

boolean | "indeterminate"

—

Controlled state; use with onCheckedChange.

Checkbox

An 18px, 6px-radius checkbox whose check pops in, with a clickable label and helper text.

TypeScript Source with Startup & Business plans Light & dark

Remember this deviceSkip verification for 30 days.Send me product updatesAbout once a month.

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 { CheckboxRow } from '@/components/component-kit/items/checkbox-row';
2
3export function Example() {
4  return (
5    <CheckboxRow
6      label="Remember this device"
7      description="Skip verification for 30 days."
8    />
9  );
10}

Props

Checkbox properties
Prop	Type	Default	Description
`label`	`ReactNode`	`—`	Row label.
`description`	`ReactNode`	`—`	Helper text under the label.
`checked`	`boolean \| "indeterminate"`	`—`	Controlled state; use with onCheckedChange.