Checkbox Component

A simple checkbox component for binary selections. Perfect for forms and preference settings with label support.

Form Control

Live Preview

I agree to the terms

Current value: unchecked

Usage

import { Checkbox } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

export default function App() {
  const [checked, setChecked] = useState(false);

  return (
    <Checkbox
      checked={checked}
      onChange={setChecked}
      label="I agree to terms"
    />
  );
}

Features

Simple & Clean

Minimal and straightforward checkbox component.

Label Support

Easily associate labels with checkboxes.

Accessible

Full keyboard navigation and screen reader support.

Customizable

Style it with Tailwind CSS to match your design.

Props

Prop	Type	Default	Description
checked	boolean	false	Checked state
onChange	(checked: boolean) => void	-	Called with the next checked state
label	string	-	Associated label text
disabled	boolean	false	Disable checkbox
id	string	-	Unique identifier
size	'sm' \| 'md' \| 'lg'	'md'	Controls the DaisyUI checkbox size
error	string \| string[]	-	Applies the error style for form validation scenarios
onBlur	() => void	-	Blur handler for focus validation flows

← Back to Components