Checkbox Component Documentation
Checkboxes demonstrating different visual variants: default, filled, outlined, soft.
Complete Installation Guide
Comprehensive step-by-step instructions to install and use the Checkboxcomponent in your React/Next.js project with TypeScript and JavaScript support.
Step 1: Install Component
Description: Install the component using our CLI tool
Type: cli
TypeScript Installation Command:
npx screenui add checkbox --lang ts --path src/componentsJavaScript Installation Command:
npx screenui add checkbox --lang js --path src/componentsStep 2: Usage Example
Description: Copy and use the component in your project
Type: usage
TypeScript Implementation
Complete TypeScript code examples for the Checkbox component with full type safety, props interface, and implementation details.
File: Checkbox.tsx
Language: tsx
File Type: TypeScript React Component
import React, { useState } from "react";
import { CheckboxWithLabel } from "@/components/Checkbox";
export default function VariantCheckboxDemo() {
const [defaultChecked, setDefaultChecked] = useState(false);
const [filledChecked, setFilledChecked] = useState(true);
const [outlinedChecked, setOutlinedChecked] = useState(false);
const [softChecked, setSoftChecked] = useState(true);
return (
<div className="space-y-8">
<div className="flex gap-4 flex-wrap">
<CheckboxWithLabel
label="Default"
variant="default"
checked={defaultChecked}
onChange={(c) => setDefaultChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Filled"
variant="filled"
checked={filledChecked}
onChange={(c) => setFilledChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Outlined"
variant="outlined"
checked={outlinedChecked}
onChange={(c) => setOutlinedChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Soft"
variant="soft"
checked={softChecked}
onChange={(c) => setSoftChecked(c === 'indeterminate' ? true : c)}
/>
</div>
</div>
);
}
JavaScript Implementation
Complete JavaScript code examples for the Checkbox component with ES6+ syntax, modern React patterns, and compatibility notes.
File: Checkbox.jsx
Language: jsx
File Type: JavaScript React Component
import React, { useState } from "react";
import { CheckboxWithLabel } from "@/components/Checkbox";
export default function VariantCheckboxDemo() {
const [defaultChecked, setDefaultChecked] = useState(false);
const [filledChecked, setFilledChecked] = useState(true);
const [outlinedChecked, setOutlinedChecked] = useState(false);
const [softChecked, setSoftChecked] = useState(true);
return (
<div className="space-y-8">
<div className="flex gap-4 flex-wrap">
<CheckboxWithLabel
label="Default"
variant="default"
checked={defaultChecked}
onChange={(c) => setDefaultChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Filled"
variant="filled"
checked={filledChecked}
onChange={(c) => setFilledChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Outlined"
variant="outlined"
checked={outlinedChecked}
onChange={(c) => setOutlinedChecked(c === 'indeterminate' ? true : c)}
/>
<CheckboxWithLabel
label="Soft"
variant="soft"
checked={softChecked}
onChange={(c) => setSoftChecked(c === 'indeterminate' ? true : c)}
/>
</div>
</div>
);
}
Required Dependencies and Prerequisites
The following packages and tools are required to use this component. Ensure all dependencies are installed and properly configured.
- react - Core React library for component functionality
- tailwindcss - Utility-first CSS framework for styling
- lucide-react - Icon library for visual elements
Usage Examples and Best Practices
Practical examples and recommended patterns for implementing and customizing the Checkbox component in your React/Next.js application.
Basic Usage
Import and use the Checkbox component in your React components. The component supports both TypeScript and JavaScript projects.
Advanced Configuration
Customize the component with props, styling, event handlers, and advanced patterns as shown in the code examples above.
Integration Notes
This component is designed to work seamlessly with Next.js, Tailwind CSS, and modern React patterns. It supports server-side rendering, static generation, and client-side hydration.
Accessibility Features
The component includes built-in accessibility features such as ARIA labels, keyboard navigation, screen reader support, and focus management.
Performance Considerations
Optimized for performance with React.memo, efficient re-rendering, and minimal bundle impact. Supports code splitting and lazy loading.
Frequently Asked Questions
How do I customize the styling?
Use Tailwind CSS classes via the className prop, or apply custom CSS using CSS modules or styled-components.
Is this component accessible?
Yes, the component follows WCAG guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.
Can I use this with other frameworks?
This component is designed for React/Next.js, but the patterns can be adapted for other frameworks like Vue.js or Angular.