Checkbox

A checkbox component with convenience and compound APIs

A checkbox component built with Ark UI that supports both a convenience API and a full compound API.

I accept the terms and conditions

import { Checkbox } from "@/components/ui/checkbox";

export default function Example() {
  return <Checkbox label="I accept the terms and conditions" />;
}

View Code

Installation

bash

liminal add checkbox

Usage

I accept the terms and conditions

import { Checkbox } from "@/components/ui/checkbox";

export default function Example() {
  return <Checkbox label="I accept the terms and conditions" />;
}

View Code

Examples

Compound API

Subscribe to newsletter

import {
  CheckboxRoot,
  CheckboxControl,
  CheckboxLabel,
  CheckboxHiddenInput,
} from "@/components/ui/checkbox";

export default function Example() {
  return (
    <CheckboxRoot className="inline-flex items-center gap-2">
      <CheckboxHiddenInput />
      <CheckboxControl />
      <CheckboxLabel>Subscribe to newsletter</CheckboxLabel>
    </CheckboxRoot>
  );
}

View Code

API

Prop	Type	Default	Description
label	React.ReactNode	-	Label text shown next to the checkbox.
checked	boolean	-	Controlled checked state.
defaultChecked	boolean	-	Initial checked state when uncontrolled.
onCheckedChange	(details: { checked: boolean }) => void	-	Callback when checked state changes.