Checkbox

A form control component that allows users to select one or multiple items from a list.

Usage

import { Checkbox } from "@rhinolabs/ui"

export default function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox 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>
  )
}

Examples

Basic Checkbox

A simple checkbox with a label.

<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label htmlFor="terms">Accept terms and conditions</label>
</div>

Disabled State

A checkbox that cannot be interacted with.

<div className="flex items-center space-x-2">
  <Checkbox id="disabled" disabled />
  <label
    htmlFor="disabled"
    className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Disabled
  </label>
</div>

With Form

Using checkbox in a form context.

<form>
  <div className="space-y-2">
    <div className="flex items-center space-x-2">
      <Checkbox id="email" />
      <label htmlFor="email">Email updates</label>
    </div>
    <div className="flex items-center space-x-2">
      <Checkbox id="marketing" />
      <label htmlFor="marketing">Marketing emails</label>
    </div>
  </div>
</form>

Props

Prop	Type	Default	Description
checked	boolean	-	The controlled checked state
defaultChecked	boolean	-	The default checked state
disabled	boolean	-	Whether the checkbox is disabled
required	boolean	-	Whether the checkbox is required
onCheckedChange	(checked: boolean) => void	-	Callback when checked state changes

The Checkbox component also accepts all HTML input attributes.

Design Considerations

• Use clear and concise labels
• Group related checkboxes
• Maintain consistent spacing
• Consider touch targets
• Provide visual feedback

Accessibility

• Supports keyboard navigation
• Includes proper ARIA attributes
• Maintains focus states
• Provides visual feedback
• Links label with input