Checkbox

Checkboxes let users select one or more items from a list, or turn an item on or off

Usage

Checkboxes should be used instead of switches if multiple, related options can be selected from a list. Checkboxes visually group similar items effectively and take up less space than switches.

Instalation

Run the following command:

npm i @radix-ui/react-checkbox

Copy and paste the following code into your project.

'use client'

import * as React from 'react'
import * as CheckboxPrimitive from '@radix-ui/react-checkbox'

import { cn } from '@/lib/utils'
import { Icon } from '@/components/ui/icon'

interface CheckboxProps
  extends React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
  customIcon?: React.ReactNode
}

const Checkbox = React.forwardRef<
  React.ElementRef<typeof CheckboxPrimitive.Root>,
  CheckboxProps
>(({ className, customIcon, ...props }, ref) => (
  <CheckboxPrimitive.Root
    ref={ref}
    className={cn(
      'peer grid h-5 w-5 shrink-0 place-items-center rounded-xs border-2 border-outline text-onPrimary ring-offset-surface transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/38 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-38 data-[state=checked]:border-0 data-[state=checked]:bg-primary disabled:data-[state=checked]:bg-outline',
      className
    )}
    {...props}
  >
    <CheckboxPrimitive.Indicator
      className={cn(
        'flex h-[18px] w-[18px] items-center justify-center text-current transition-transform duration-200 animate-in data-[state=unchecked]:animate-out data-[state=checked]:zoom-in-0 data-[state=unchecked]:zoom-out-0 [&>i]:text-[18px] [&>svg]:h-[18px] [&>svg]:w-[18px]'
      )}
    >
      {customIcon || <Icon symbol="check" />}
    </CheckboxPrimitive.Indicator>
  </CheckboxPrimitive.Root>
))
Checkbox.displayName = CheckboxPrimitive.Root.displayName

export { Checkbox }

Update the import paths to match your project setup.

Examples

Default checkbox

Pickles

Tomato

Lettuce

import { Checkbox } from '@/components/ui/checkbox'

export const DefaultCheckbox = () => {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-x-6">
        <Checkbox id="terms" />
        <label
          htmlFor="terms"
          className="text-label-lg peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Pickles
        </label>
      </div>
      <div className="flex items-center gap-x-6">
        <Checkbox id="terms" disabled />
        <label
          htmlFor="terms"
          className="text-label-lg peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Tomato
        </label>
      </div>
      <div className="flex items-center gap-x-6">
        <Checkbox id="terms" disabled checked />
        <label
          htmlFor="terms"
          className="text-label-lg peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          Lettuce
        </label>
      </div>
    </div>
  )
}

With custom icon

Receive emails

import { Checkbox } from '@/components/ui/checkbox'
import { Icon } from '@/components/ui/icon'

export const CustomIconCheckbox = () => {
  return (
    <div className="flex items-center gap-x-6">
      <Checkbox
        id="receive-emails"
        customIcon={<Icon symbol="horizontal_rule" />}
      />
      <label
        htmlFor="receive-emails"
        className="text-label-lg peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Receive emails
      </label>
    </div>
  )
}

arrow_back Top app bars Chips arrow_forward