Skip to Content
Dashflow Logo

Checkbox Component

A comprehensive guide to using the Checkbox component with examples, props, and best practices.

Overview

The Checkbox component is a form control that allows users to select one or more options from a set. It provides a clean and accessible way to handle boolean selections and multi-choice scenarios.

Basic Usage

import { Checkbox } from '@dashflowx/core'


export default function CheckboxExample() {
  const [checked, setChecked] = useState(false);
  
  return (
    <Checkbox 
      label="Accept terms and conditions"
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
      variant="basic"
    />
  )
}

Preview:

Props

PropTypeDefaultDescription
labelstring'Checkbox Label'The label text for the checkbox
checkedbooleanfalseWhether the checkbox is checked
disabledbooleanfalseWhether the checkbox is disabled
variant'basic' | 'one''basic'The visual variant of the checkbox
valueany-The value associated with the checkbox
onChangefunction-Callback function when checkbox state changes

Examples

Basic Checkbox

<Checkbox 
  label="I agree to the terms"
  checked={false}
  onChange={handleChange}
  variant="basic"
/>

Preview:

Checked Checkbox

<Checkbox 
  label="Subscribe to newsletter"
  checked={true}
  onChange={handleChange}
  variant="basic"
/>

Preview:

Disabled Checkbox

<Checkbox 
  label="This option is disabled"
  checked={false}
  disabled={true}
  variant="basic"
/>

Preview:

Checkbox with Different Variants

<div className="space-y-4">
  <Checkbox 
    label="Basic variant"
    checked={true}
    variant="basic"
  />
  <Checkbox 
    label="One variant"
    checked={true}
    variant="one"
  />
</div>

Preview:

Common Use Cases

Form Checkboxes

<div className="space-y-3">
  <Checkbox 
    label="I agree to the Terms of Service"
    checked={termsAccepted}
    onChange={(e) => setTermsAccepted(e.target.checked)}
    variant="basic"
  />
  <Checkbox 
    label="I agree to the Privacy Policy"
    checked={privacyAccepted}
    onChange={(e) => setPrivacyAccepted(e.target.checked)}
    variant="basic"
  />
  <Checkbox 
    label="Send me promotional emails"
    checked={promotionalEmails}
    onChange={(e) => setPromotionalEmails(e.target.checked)}
    variant="basic"
  />
</div>

Settings Panel

<div className="space-y-4">
  <h3 className="text-lg font-semibold">Notification Settings</h3>
  <Checkbox 
    label="Email notifications"
    checked={emailNotifications}
    onChange={(e) => setEmailNotifications(e.target.checked)}
    variant="basic"
  />
  <Checkbox 
    label="Push notifications"
    checked={pushNotifications}
    onChange={(e) => setPushNotifications(e.target.checked)}
    variant="basic"
  />
  <Checkbox 
    label="SMS notifications"
    checked={smsNotifications}
    onChange={(e) => setSmsNotifications(e.target.checked)}
    variant="basic"
  />
</div>

Multi-Select Options

<div className="space-y-2">
  <h4 className="font-medium">Select your interests:</h4>
  <Checkbox 
    label="Technology"
    checked={interests.includes('technology')}
    onChange={() => toggleInterest('technology')}
    variant="basic"
  />
  <Checkbox 
    label="Design"
    checked={interests.includes('design')}
    onChange={() => toggleInterest('design')}
    variant="basic"
  />
  <Checkbox 
    label="Business"
    checked={interests.includes('business')}
    onChange={() => toggleInterest('business')}
    variant="basic"
  />
</div>

Conditional Checkboxes

<div className="space-y-3">
  <Checkbox 
    label="Enable advanced features"
    checked={advancedFeatures}
    onChange={(e) => setAdvancedFeatures(e.target.checked)}
    variant="basic"
  />
  {advancedFeatures && (
    <div className="ml-6 space-y-2">
      <Checkbox 
        label="Feature A"
        checked={featureA}
        onChange={(e) => setFeatureA(e.target.checked)}
        variant="basic"
      />
      <Checkbox 
        label="Feature B"
        checked={featureB}
        onChange={(e) => setFeatureB(e.target.checked)}
        variant="basic"
      />
    </div>
  )}
</div>

Best Practices

1. Clear Labels

Use descriptive labels that clearly indicate what the checkbox controls.

// ✅ Good - Clear label
<Checkbox 
  label="I agree to receive marketing emails"
  checked={marketingEmails}
  onChange={handleChange}
/>


// ❌ Avoid - Unclear label
<Checkbox 
  label="Option 1"
  checked={option1}
  onChange={handleChange}
/>

2. Logical Grouping

Group related checkboxes together with proper spacing and visual hierarchy.

// ✅ Good - Logical grouping
<div className="space-y-3">
  <h4 className="font-medium">Privacy Settings</h4>
  <Checkbox label="Public profile" checked={publicProfile} onChange={handleChange} />
  <Checkbox label="Show email" checked={showEmail} onChange={handleChange} />
  <Checkbox label="Allow messaging" checked={allowMessaging} onChange={handleChange} />
</div>

3. Consistent Variants

Use the same variant throughout your application for consistency.

// ✅ Good - Consistent variant
<div className="space-y-2">
  <Checkbox label="Option 1" variant="basic" />
  <Checkbox label="Option 2" variant="basic" />
  <Checkbox label="Option 3" variant="basic" />
</div>

4. Accessibility

Ensure proper accessibility with clear labels and keyboard navigation.

// ✅ Good - Accessible checkbox
<Checkbox 
  label="I understand the risks"
  checked={understood}
  onChange={handleChange}
  variant="basic"
/>

5. State Management

Use proper state management for checkbox groups.

// ✅ Good - Proper state management
const [selectedItems, setSelectedItems] = useState<string[]>([]);


const toggleItem = (item: string) => {
  setSelectedItems(prev => 
    prev.includes(item) 
      ? prev.filter(i => i !== item)
      : [...prev, item]
  );
};

Customization

Custom Styling

You can customize the checkbox appearance using CSS classes:

<Checkbox 
  label="Custom styled checkbox"
  checked={checked}
  onChange={handleChange}
  className="custom-checkbox"
/>

Different Variants

Use different variants for different use cases:

// Basic variant - standard appearance
<Checkbox 
  label="Standard checkbox"
  variant="basic"
  checked={checked}
  onChange={handleChange}
/>


// One variant - alternative appearance
<Checkbox 
  label="Alternative checkbox"
  variant="one"
  checked={checked}
  onChange={handleChange}
/>

Form Integration

With Form Libraries

The Checkbox component works well with popular form libraries:

// With React Hook Form
import { useForm, Controller } from 'react-hook-form';


function MyForm() {
  const { control } = useForm();
  
  return (
    <Controller
      name="terms"
      control={control}
      render={({ field }) => (
        <Checkbox 
          label="I agree to the terms"
          checked={field.value}
          onChange={field.onChange}
          variant="basic"
        />
      )}
    />
  );
}

Validation

Add validation to your checkboxes:

<Checkbox 
  label="I agree to the terms and conditions"
  checked={termsAccepted}
  onChange={handleChange}
  variant="basic"
/>
{!termsAccepted && (
  <p className="text-red-500 text-sm mt-1">
    You must agree to the terms and conditions
  </p>
)}
  • RadioGroup: For single-choice selections
  • Switch: For toggle selections
  • Select: For dropdown selections
  • Input: For text input
  • TextArea: For multi-line text input

API Reference

For the complete API reference and advanced usage patterns, see the Checkbox API documentation.

Edit this page on GitHub
previousTextarea