Checkbox

form

An accessible, customizable checkbox component with support for indeterminate state, custom labels, and keyboard navigation.

I agree to the termsSubscribe to newsletterDisabled option

1Installation

Install the package:

$npm install piece-ui

Import the component:

tsx

1import { Checkbox } from "piece-ui";

2Usage

Basic usage

tsx

1import { Checkbox } from "piece-ui";
2
3export default function Example() {
4  return (
5    <div className="flex flex-col gap-2">
6      <Checkbox label="I agree to the terms" />
7      <Checkbox label="Subscribe to newsletter" defaultChecked />
8      <Checkbox label="Disabled option" disabled />
9    </div>
10  );
11}

3Props

Prop	Type	Default	Description
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Initial uncontrolled checked state.
`onChange`	`(checked: boolean) => void`	—	Change handler.
`disabled`	`boolean`	`false`	Disables the checkbox.
`label`	`string`	—	Label text displayed next to checkbox.

ProjectCard

ConfirmDialog