Checkbox

A control that allows users to toggle a single option on or off.

Installation


pnpm dlx shadcn@latest add @basic-ui/checkbox

Usage

"use client"
 
import { useState } from 'react';
import { Checkbox, CheckboxWrapper } from '@/registry/basic-ui/checkbox';

Radio Group

Avatar

On This Page

Installation Usage Examples Sizes Design System Size Props CheckboxWrapper Props Checkbox Props

Size	Height	Width	Radius
`s`	`--checkbox-radio-height-s`	`--checkbox-radio-width-s`	`--checkbox-radio-radius-s`
`r`	`--checkbox-radio-height-r`	`--checkbox-radio-height-r`	`--checkbox-radio-radius-r`
`m`	`--checkbox-radio-height-m`	`--checkbox-radio-height-m`	`--checkbox-radio-radius-m`

Prop	Type	Default	Required	Description
`htmlFor`	`string`	`undefined`	Yes	The HTML for attribute of the checkbox wrapper
`children`	`ReactNode`	`undefined`	Yes	The children of the checkbox wrapper
`className`	`string`	`undefined`	No	The class name of the checkbox wrapper

Prop	Type	Default	Required	Description
`id`	`string`	`undefined`	Yes	The id of the checkbox
`className`	`string`	`undefined`	No	The class name of the checkbox
`checked`	`boolean`	`false`	No	Whether the checkbox is checked
`onCheckedChange`	`(checked: boolean) => void`	`undefined`	No	The function to call when the checkbox is checked
`defaultChecked`	`boolean`	`false`	No	Whether the checkbox is default checked
`indeterminate`	`boolean`	`false`	No	Whether the checkbox is indeterminate
`disabled`	`boolean`	`false`	No	Whether the checkbox is disabled
`size`	`s` / `r` / `m`	`r`	No	The size of the checkbox

'use client';

import { Checkbox, CheckboxWrapper } from '@/registry/basic-ui/checkbox';

export function CheckboxDefault() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-semibold text-(--grey-text-alpha-1-default)">
        Email preferences
      </legend>
      <CheckboxWrapper htmlFor="insights">
        <Checkbox id="insights" />
        <span>unchecked</span>
      </CheckboxWrapper>
      <CheckboxWrapper htmlFor="default-checked">
        <Checkbox id="default-checked" defaultChecked />
        <span>default checked</span>
      </CheckboxWrapper>
      <CheckboxWrapper htmlFor="half-checked">
        <Checkbox id="half-checked" indeterminate />
        <span>half checked</span>
      </CheckboxWrapper>
      <CheckboxWrapper htmlFor="disabled-checked">
        <Checkbox id="disabled-checked" disabled={true} defaultChecked />
        <span>disabled checked</span>
      </CheckboxWrapper>
      <CheckboxWrapper htmlFor="disabled-half-checked">
        <Checkbox id="disabled-half-checked" disabled={true} indeterminate />
        <span>disabled half checked</span>
      </CheckboxWrapper>
      <CheckboxWrapper htmlFor="disabled-unchecked">
        <Checkbox id="disabled-unchecked" disabled={true} />
        <span>disabled unchecked</span>
      </CheckboxWrapper>
    </fieldset>
  );
}

'use client';

import { Checkbox, CheckboxWrapper } from '@/registry/basic-ui/checkbox';

const sizeVariants: Array<{
  id: string;
  label: string;
  size: 's' | 'r' | 'm';
}> = [
  { id: 'checkbox-size-s', label: 'Small (s)', size: 's' },
  { id: 'checkbox-size-r', label: 'Regular (r)', size: 'r' },
  { id: 'checkbox-size-m', label: 'Medium (m)', size: 'm' },
];

export function CheckboxSize() {
  return (
    <fieldset className="space-y-3">
      <legend className="text-sm font-semibold text-(--grey-text-alpha-1-default)">
        Checkbox sizes
      </legend>
      {sizeVariants.map(({ id, label, size }) => (
        <CheckboxWrapper key={id} htmlFor={id}>
          <Checkbox id={id} size={size} defaultChecked={size === 'r'} />
          <span>{label}</span>
        </CheckboxWrapper>
      ))}
    </fieldset>
  );
}