Overview

A control that allows the user to toggle between checked and not checked.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}

About

This component is an expansion of the Checkbox developed and maintained by Radix UI.

By default, it presents a smooth check animation on toggle.

Installation

pnpm

pnpm add @inpulse-ui/checkbox

bun

bun add @inpulse-ui/checkbox

yarn

yarn add @inpulse-ui/checkbox

npm

npm install @inpulse-ui/checkbox

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Prop	Type	Default Value	Required
asChild	boolean	false	No
defaultChecked	boolean	false	No
checked	boolean	-	No
id	string	-	No
name	string	-	Yes
disabled	boolean	-	No
required	boolean	-	No
mono	boolean	false	No
onChange	function	-	No
value	string	on	No

Attribute	Value
[data-disabled]	Present when disabled
[data-state]	checkeduncheckedindeterminate

Usage

Instantiate the component within a form context and set an appropriate name attribute, otherwise it won’t be rendered. The name attribute must be unique within the form for proper functionality.

import { Checkbox } from '@inpulse-ui/checkbox';

<Form {...useFormProps}>
  <Checkbox name="field" />
</Form>

Examples

Default value

You can set a default value to be selected when the component is rendered. To do this, simply use the defaultChecked property.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" defaultChecked />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}

Disabled

You can disable a checkbox by setting the disabled property to true.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" disabled />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}

Colors

By default, Checkbox will be assigned the theme’s primary color when activated. But you can customize this color through CSS classes.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" className="data-[state=checked]:bg-green-500" />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}

Adopt a monochromatic style for the Checkbox by setting the mono property to true. This style will adapt to the system’s light and dark mode.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" mono />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}

Events

Use the onChange event to perform an action every time the value of the Checkbox is changed.

Preview

Code

import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Form } from '@inpulse-ui/form';
import { Checkbox } from '@inpulse-ui/checkbox';
import { Label } from '@inpulse-ui/label';

const schema = z.object({
  field: z.boolean().default(false).optional(),
});

export function Demo() {
  const methods = useForm({ resolver: zodResolver(schema) });
  return (
    <Form {...methods}>
      <div className="flex items-center space-x-2">
        <Checkbox name="field" id="terms" onChange={(checked) => console.log(checked)} />
        <Label for="terms">Accept terms and conditions</Label>
      </div>
    </Form>
  );
}