Component

Checkbox

A native checkbox with Axie sizing, color, label, and description patterns.

Preview

Count recurring spendInclude committed recurring items.Archive this entryKeep the item visible but inactive.

Installation

Install the package, then import the component and shared stylesheet in your app.

Package install

Install the package when you want components imported from axie-ui.

install

pnpm add axie-ui

Import

code

import "axie-ui/styles.css";import { Checkbox } from "axie-ui";

Registry install

Use the direct URL when you want shadcn to copy editable source into your app. This works without the official registry and does not install axie-ui.

registry

pnpm dlx shadcn@latest add https://axie.alexi.life/r/checkbox.json

Copied source import

code

import "@/styles/axie.css";import { Checkbox } from "@/components/axie/checkbox";

Prefer @axie/checkbox? Add the Axie namespace once from the Installation page, then use that shorthand.

Usage

code

import { Checkbox } from "axie-ui";export function Example() {  return <Checkbox label="Count recurring spend" defaultChecked />;}

Accessibility

Keep the checkbox label visible and clickable.
Use helper text for consequences, not placeholder copy.
Group related checkboxes with a fieldset and legend when the set has shared meaning.

API Reference

Prop	Type	Default	Description
label	ReactNode	-	Optional label rendered beside the native checkbox.
description	ReactNode	-	Optional descriptive copy.
...props	InputHTMLAttributes<HTMLInputElement>	-	Accepts every native checkbox prop except type.