PaperCheckbox

Square checkbox with clear checked and focus states.

↗ sharp edges, clear choices.

Preview

Email me release notesAbout one message a month.

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
  label?: string
  hint?: string

Installation

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperCheckbox/paperCheckbox.tsx⎘
Step 2.Create the barrel:
components/ui/paperCheckbox/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperCheckbox'
```

Variants

Unchecked

Checked

Disabled

Props

Prop	Type	Default	Description
`label`	`string`	`undefined`	Primary label text.
`hint`	`string`	`undefined`	Secondary helper text.
`defaultChecked`	`boolean`	`false`	Initial checked state for uncontrolled usage.

Examples

Consent checkbox

Use with concise legal language and optional hint.

I agree to the termsRequired before continuing.

<PaperCheckbox label="I agree to the terms" />

Preference toggles

Group checkboxes for independent notification settings.

Product updatesSecurity alerts

<PaperCheckbox label="Product updates" defaultChecked />