Checkbox

Renders a checkbox that allows single or multiple selections from a list of options.

'use client';

import { Checkbox, CheckboxGroup } from '@components/caprice-ui/checkbox';

export default function CheckboxDemo() {
  return (
    <CheckboxGroup>
      <Checkbox value="1">Checkbox 1</Checkbox>
      <Checkbox value="2">Checkbox 2</Checkbox>
      <Checkbox value="3">Checkbox 3</Checkbox>
    </CheckboxGroup>
  );
}

Installation

npx shadcn@latest add @caprice/checkbox

npx shadcn@latest add @caprice/checkbox

npm install @caprice-ui/react

npm install @caprice-ui/react

Install the following dependencies:

npm install @base-ui/react lucide-react

npm install @base-ui/react lucide-react

Add a cn helper

import { defineConfig, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const {
  compose,
  cva,
  cx: cn,
} = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

Copy and paste the following code into your project.

'use client';

import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';
import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';
import { CheckIcon, MinusIcon } from 'lucide-react';
import type * as React from 'react';

import { cn } from '@/lib/utils';

/**
 * Provides a shared state to a series of checkboxes.
 *
 * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox)
 *
 * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox-group#api-reference)
 */
export namespace CheckboxGroup {
  export type State = CheckboxGroupPrimitive.State;
  export type Props = React.ComponentProps<typeof CheckboxGroupPrimitive>;
  export type ChangeEventDetails = CheckboxGroupPrimitive.ChangeEventDetails;
  export type ChangeEventReason = CheckboxGroupPrimitive.ChangeEventReason;
}

export function CheckboxGroup({ className, ...props }: CheckboxGroup.Props) {
  return (
    <CheckboxGroupPrimitive
      className={cn('flex flex-col items-start gap-1.5', className)}
      data-slot="checkbox-group"
      {...props}
    />
  );
}

/**
 * Represents the checkbox itself.
 * Renders a `<span>` element and a hidden `<input>` beside.
 *
 * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox)
 *
 * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox#root)
 */
export namespace Checkbox {
  export type State = CheckboxPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof CheckboxPrimitive.Root>;
  export type ChangeEventDetails = CheckboxPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = CheckboxPrimitive.Root.ChangeEventReason;
}

export function Checkbox({ className, ...props }: Checkbox.Props) {
  return (
    <CheckboxPrimitive.Root className={cn('', className)} data-slot="checkbox" {...props}>
      <CheckboxPrimitive.Indicator
        className={cn('')}
        data-slot="checkbox-indicator"
        render={(indicatorProps, { indeterminate }) => (
          <span {...indicatorProps}>
            {indeterminate ? (
              <MinusIcon className="size-3.5" />
            ) : (
              <CheckIcon className="size-3.5" />
            )}
          </span>
        )}
      />
    </CheckboxPrimitive.Root>
  );
}

'use client';import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group';import { CheckIcon, MinusIcon } from 'lucide-react';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Provides a shared state to a series of checkboxes. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox-group#api-reference) */export namespace CheckboxGroup {  export type State = CheckboxGroupPrimitive.State;  export type Props = React.ComponentProps<typeof CheckboxGroupPrimitive>;  export type ChangeEventDetails = CheckboxGroupPrimitive.ChangeEventDetails;  export type ChangeEventReason = CheckboxGroupPrimitive.ChangeEventReason;}export function CheckboxGroup({ className, ...props }: CheckboxGroup.Props) {  return (    <CheckboxGroupPrimitive      className={cn('flex flex-col items-start gap-1.5', className)}      data-slot="checkbox-group"      {...props}    />  );}/** * Represents the checkbox itself. * Renders a `<span>` element and a hidden `<input>` beside. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox#root) */export namespace Checkbox {  export type State = CheckboxPrimitive.Root.State;  export type Props = React.ComponentProps<typeof CheckboxPrimitive.Root>;  export type ChangeEventDetails = CheckboxPrimitive.Root.ChangeEventDetails;  export type ChangeEventReason = CheckboxPrimitive.Root.ChangeEventReason;}export function Checkbox({ className, ...props }: Checkbox.Props) {  return (    <CheckboxPrimitive.Root className={cn('', className)} data-slot="checkbox" {...props}>      <CheckboxPrimitive.Indicator        className={cn('')}        data-slot="checkbox-indicator"        render={(indicatorProps, { indeterminate }) => (          <span {...indicatorProps}>            {indeterminate ? (              <MinusIcon className="size-3.5" />            ) : (              <CheckIcon className="size-3.5" />            )}          </span>        )}      />    </CheckboxPrimitive.Root>  );}

Update the import paths to match your project setup.

Usage

import { Checkbox, CheckboxGroup } from "@/components/caprice-ui/checkbox"

import { Checkbox, CheckboxGroup } from "@/components/caprice-ui/checkbox"

import { Checkbox, CheckboxGroup } from "@caprice-ui/react/checkbox"

import { Checkbox, CheckboxGroup } from "@caprice-ui/react/checkbox"

<CheckboxGroup>
  <Checkbox value="1">Checkbox 1</Checkbox>
  <Checkbox value="2">Checkbox 2</Checkbox>
  <Checkbox value="3">Checkbox 3</Checkbox>
</CheckboxGroup>

<Checkbox />

'use client'; import { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox'; import { CheckboxGroup as CheckboxGroupPrimitive } from '@base-ui/react/checkbox-group'; import { CheckIcon, MinusIcon } from 'lucide-react'; import type * as React from 'react'; import { cn } from '@/lib/utils'; /** * Provides a shared state to a series of checkboxes. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox-group#api-reference) */ export namespace CheckboxGroup { export type State = CheckboxGroupPrimitive.State; export type Props = React.ComponentProps<typeof CheckboxGroupPrimitive>; export type ChangeEventDetails = CheckboxGroupPrimitive.ChangeEventDetails; export type ChangeEventReason = CheckboxGroupPrimitive.ChangeEventReason; } export function CheckboxGroup({ className, ...props }: CheckboxGroup.Props) { return ( <CheckboxGroupPrimitive className={cn('flex flex-col items-start gap-1.5', className)} data-slot="checkbox-group" {...props} /> ); } /** * Represents the checkbox itself. * Renders a `<span>` element and a hidden `<input>` beside. * * Documentation: [Caprice UI Checkbox](https://caprice-ui.com/docs/components/checkbox) * * API Reference: [Base UI Checkbox](https://base-ui.com/react/components/checkbox#root) */ export namespace Checkbox { export type State = CheckboxPrimitive.Root.State; export type Props = React.ComponentProps<typeof CheckboxPrimitive.Root>; export type ChangeEventDetails = CheckboxPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = CheckboxPrimitive.Root.ChangeEventReason; } export function Checkbox({ className, ...props }: Checkbox.Props) { return ( <CheckboxPrimitive.Root className={cn('', className)} data-slot="checkbox" {...props}> <CheckboxPrimitive.Indicator className={cn('')} data-slot="checkbox-indicator" render={(indicatorProps, { indeterminate }) => ( <span {...indicatorProps}> {indeterminate ? ( <MinusIcon className="size-3.5" /> ) : ( <CheckIcon className="size-3.5" /> )} </span> )} /> </CheckboxPrimitive.Root> ); }

Installation

Install the following dependencies:

Add a cn helper

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Examples

API Reference

CheckboxGroup

Checkbox

On this page

Contribute