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

await import('/components/data-input/checkbox.js');
const { tags, $ } = Lightview;
const { div, Checkbox } = 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
$('#example').content(
    div({ style: 'display: flex; flex-direction: column; gap: 1rem;' }, basic, withDesc, required, disabled)
);
await import('/components/data-input/checkbox.js');
const { $, tags } = Lightview;
const { Checkbox, div } = tags;

const basic = {
    tag: Checkbox,
    attributes: { label: 'Remember me' }
};

const withDesc = {
    tag: Checkbox,
    attributes: {
        label: 'Subscribe to newsletter',
        description: 'Get weekly updates on new features',
        color: 'primary'
    }
};

const required = {
    tag: Checkbox,
    attributes: {
        label: 'I agree to the terms and conditions',
        required: true
    }
};

const disabled = {
    tag: Checkbox,
    attributes: {
        label: 'This option is locked',
        defaultChecked: true,
        disabled: true
    }
};

$('#example').content({
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem;' },
    children: [basic, withDesc, required, disabled]
});
await import('/components/data-input/checkbox.js');
const { tags, $ } = Lightview;

$('#example').content({
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem;',
        children: [
            { Checkbox: { label: 'Remember me' } },
            { 
                Checkbox: { 
                    label: 'Subscribe to newsletter',
                    description: 'Get weekly updates on new features',
                    color: 'primary'
                } 
            },
            { 
                Checkbox: { 
                    label: 'I agree to the terms and conditions',
                    required: true
                } 
            },
            { 
                Checkbox: { 
                    label: 'This option is locked',
                    defaultChecked: true,
                    disabled: true
                } 
            }
        ]
    }
});
<!-- Import the component (registers lv-checkbox) -->
<script type="module" src="/components/data-input/checkbox.js"></script>

<div style="display: flex; flex-direction: column; gap: 1rem;">
    <lv-checkbox label="Remember me"></lv-checkbox>
    <lv-checkbox label="Subscribe to newsletter" description="Get weekly updates on new features" color="primary"></lv-checkbox>
    <lv-checkbox label="I agree to the terms and conditions" required></lv-checkbox>
    <lv-checkbox label="This option is locked" default-checked disabled></lv-checkbox>
</div>

Reactive Example

Two-way binding with signals and live validation

await import('/components/data-input/checkbox.js');
const { signal, tags, $ } = Lightview;
const { div, p, span, button, Checkbox } = tags;

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

// Reactive demo
const reactiveDemo = div({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;' },
    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({ style: 'padding-top: 1rem; border-top: 1px solid oklch(var(--b3));' },
        p({ style: 'font-size: 0.875rem; font-family: monospace;' }, 
            () => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`
        ),
        button({ 
            class: 'btn btn-primary',
            style: () => `margin-top: 0.5rem; ${termsAccepted.value ? '' : 'opacity: 0.5; pointer-events: none;'}`,
            disabled: () => !termsAccepted.value
        }, 'Submit')
    )
);

$('#example').content(reactiveDemo);
await import('/components/data-input/checkbox.js');
const { signal, $, tags } = Lightview;
const { Checkbox, div, p, button } = tags;

const notifications = signal(true);
const marketing = signal(false);
const termsAccepted = signal(false);

const reactiveDemo = {
    tag: div,
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;' },
    children: [
        {
            tag: Checkbox,
            attributes: {
                label: 'Email Notifications',
                description: 'Receive important updates via email',
                checked: notifications,
                color: 'primary'
            }
        },
        {
            tag: Checkbox,
            attributes: {
                label: 'Marketing Emails',
                description: 'Promotional content and offers',
                checked: marketing,
                color: 'secondary'
            }
        },
        {
            tag: Checkbox,
            attributes: {
                label: 'Accept Terms & Conditions',
                checked: termsAccepted,
                required: true,
                color: 'accent',
                validate: (checked) => !checked ? 'You must accept the terms' : null
            }
        },
        {
            tag: div,
            attributes: { style: 'padding-top: 1rem; border-top: 1px solid oklch(var(--b3));' },
            children: [
                {
                    tag: p,
                    attributes: { style: 'font-size: 0.875rem; font-family: monospace;' },
                    children: [
                        () => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`
                    ]
                },
                {
                    tag: button,
                    attributes: {
                        class: 'btn btn-primary',
                        style: () => `margin-top: 0.5rem; ${termsAccepted.value ? '' : 'opacity: 0.5; pointer-events: none;'}`,
                        disabled: () => !termsAccepted.value
                    },
                    children: ['Submit']
                }
            ]
        }
    ]
};

$('#example').content(reactiveDemo);
await import('/components/data-input/checkbox.js');
const { signal, tags, $ } = Lightview;

const notifications = signal(true);
const marketing = signal(false);
const termsAccepted = signal(false);

const reactiveDemo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem;',
        children: [
            {
                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: {
                    style: 'padding-top: 1rem; border-top: 1px solid oklch(var(--b3));',
                    children: [
                        {
                            p: {
                                style: 'font-size: 0.875rem; font-family: monospace;',
                                children: [() => `Notifications: ${notifications.value}, Marketing: ${marketing.value}`]
                            }
                        },
                        {
                            button: {
                                class: 'btn btn-primary',
                                style: () => `margin-top: 0.5rem; ${termsAccepted.value ? '' : 'opacity: 0.5; pointer-events: none;'}`,
                                disabled: () => !termsAccepted.value,
                                children: ['Submit']
                            }
                        }
                    ]
                }
            }
        ]
    }
};

$('#example').content(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

Checkbox Gallery

Live examples using <lv-checkbox> custom elements.

Colors

Sizes

States

With Descriptions