Docs
Checkbox

Checkbox

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

This component uses Radix UI
'use client'
 
import { Checkbox_Shadcn_ } from 'ui'
 
export function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox_Shadcn_ id="terms" />
      <label
        htmlFor="terms"
        className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  )
}

Installation

npx shadcn-ui@latest add checkbox

Usage

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

Examples

With text

You agree to our Terms of Service and Privacy Policy.

Disabled

Form

You can manage your mobile notifications in the mobile settings page.
Select the items you want to display in the sidebar.