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