Checkbox

Checkbox allows the user to select one or multiple items from a set. Supports labels, descriptions, validation, and reactive state binding.

Basic Examples

Simple checkboxes with various configurations

// Dynamic import of the Checkbox component

const { default: Checkbox } = await import('/components/data-input/checkbox.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic checkbox
const basic = Checkbox({ 
    label: 'Remember me' 
});

// 2. Checkbox with description
const withDesc = Checkbox({ 
    label: 'Subscribe to newsletter',
    description: 'Get weekly updates on new features',
    color: 'primary'
});

// 3. Required checkbox
const required = Checkbox({ 
    label: 'I agree to the terms and conditions',
    required: true
});

// 4. Pre-checked disabled checkbox
const disabled = Checkbox({ 
    label: 'This option is locked',
    defaultChecked: true,
    disabled: true
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-4' }, basic, withDesc, required, disabled)
);

Reactive Example

Two-way binding with signals and live validation


const { default: Checkbox } = await import('/components/data-input/checkbox.js');

const { signal, tags, $ } = Lightview;
const { div, p, span, button } = tags;

// Signals for checkboxes
const notifications = signal(true);
const marketing = signal(false);
const termsAccepted = signal(false);

// Reactive demo
const reactiveDemo = div({ class: 'space-y-4 max-w-md' },
    Checkbox({ 
        label: 'Email Notifications',
        description: 'Receive important updates via email',
        checked: notifications,
        color: 'primary'
    }),
    Checkbox({ 
        label: 'Marketing Emails',
        description: 'Promotional content and offers',
        checked: marketing,
        color: 'secondary'
    }),
    Checkbox({ 
        label: 'Accept Terms & Conditions',
        checked: termsAccepted,
        required: true,
        color: 'accent',
        validate: (checked) => !checked ? 'You must accept the terms' : null
    }),
    div({ class: 'pt-4 border-t border-base-300' },
        p({ class: 'text-sm font-mono' }, 
            () => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`
        ),
        button({ 
            class: () => `btn btn-primary mt-2 ${termsAccepted.value ? '' : 'btn-disabled'}`,
            disabled: () => !termsAccepted.value
        }, 'Submit')
    )
);

$('#demo').insert(reactiveDemo);

Props

Prop Type Default Description
checked boolean | signal - Checked state (reactive with signals)
defaultChecked boolean false Default checked state for uncontrolled mode
indeterminate boolean false Indeterminate (partial) state
label string - Label text displayed next to checkbox
description string - Description text below the label
error string | function - Error message or reactive error function
validate function - Validation function: (checked) => errorMessage | null
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
disabled boolean false Disable the checkbox
required boolean false Mark as required field (shows asterisk)
onChange function - Callback when value changes: (checked, event) => void
useShadow boolean * Render in Shadow DOM. *Follows global initComponents() setting

Colors

Sizes

With Label

For more examples and styling options, see the DaisyUI Checkbox documentation.