sigpro-ui/docs/components/checkbox.md

Checkbox

Toggle checkbox component with label support and reactive state management.

Tag

Checkbox

Props

Prop	Type	Default	Description
label	string	-	Label text for the checkbox
value	boolean | Signal<boolean>	false	Checked state
toggle	boolean	false	Display as toggle switch instead of checkbox
disabled	boolean | Signal<boolean>	false	Disabled state
class	string	''	Additional CSS classes (DaisyUI + Tailwind)
onclick	function	-	Click event handler

Styling

Checkbox supports all daisyUI Checkbox and Toggle classes:

Category	Keywords	Description
Color (Checkbox)	checkbox-primary, checkbox-secondary, checkbox-accent, checkbox-info, checkbox-success, checkbox-warning, checkbox-error	Checkbox color variants
Size (Checkbox)	checkbox-xs, checkbox-sm, checkbox-md, checkbox-lg	Checkbox scale
Color (Toggle)	toggle-primary, toggle-secondary, toggle-accent, toggle-info, toggle-success, toggle-warning, toggle-error	Toggle color variants
Size (Toggle)	toggle-xs, toggle-sm, toggle-md, toggle-lg	Toggle scale

For further details, check the daisyUI Checkbox Documentation and daisyUI Toggle Documentation – Full reference for CSS classes.

Example

// Checkbox
Checkbox({ class: "checkbox-primary checkbox-lg", label: "Accept terms" });

// Toggle switch
Checkbox({ toggle: true, class: "toggle-success", label: "Enable feature" });

Live Examples

Basic Checkbox

Live Demo

const BasicDemo = () => {
  const accepted = $(false);
  
  return Checkbox({
    label: 'I accept the terms and conditions',
    value: accepted,
    onclick: () => accepted(!accepted())
  });
};
Mount(BasicDemo, '#demo-basic');

Toggle Switch

Live Demo

const ToggleDemo = () => {
  const enabled = $(false);
  
  return Div({ class: 'flex flex-col gap-4 w-full' }, [
    Checkbox({
      label: 'Enable notifications',
      value: enabled,
      toggle: true,
      onclick: () => enabled(!enabled())
    }),
    () => enabled() 
      ? Div({ class: 'alert alert-success' }, 'Notifications are ON')
      : Div({ class: 'alert alert-soft' }, 'Notifications are OFF')
  ]);
};
Mount(ToggleDemo, '#demo-toggle');

Disabled State

Live Demo

const DisabledDemo = () => {
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Checked and disabled',
      value: true,
      disabled: true
    }),
    Checkbox({
      label: 'Unchecked and disabled',
      value: false,
      disabled: true
    })
  ]);
};
Mount(DisabledDemo, '#demo-disabled');

Reactive Multiple Selection

Live Demo

const MultipleDemo = () => {
  const options = [
    { id: 1, label: 'Option 1', selected: $(false) },
    { id: 2, label: 'Option 2', selected: $(false) },
    { id: 3, label: 'Option 3', selected: $(false) }
  ];
  
  const selectAll = $(false);
  
  const toggleAll = (value) => {
    selectAll(value);
    options.forEach(opt => opt.selected(value));
  };
  
  const updateSelectAll = () => {
    const allSelected = options.every(opt => opt.selected());
    selectAll(allSelected);
  };
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Checkbox({
      label: 'Select all',
      value: selectAll,
      onclick: () => toggleAll(!selectAll())
    }),
    Div({ class: 'divider my-1' }),
    ...options.map(opt => Checkbox({
      label: opt.label,
      value: opt.selected,
      onclick: () => {
        opt.selected(!opt.selected());
        updateSelectAll();
      }
    })),
    Div({ class: 'mt-2 text-sm opacity-70' }, () => {
      const count = options.filter(opt => opt.selected()).length;
      return `${count} of ${options.length} selected`;
    })
  ]);
};
Mount(MultipleDemo, '#demo-multiple');

With Tooltip

Live Demo

const TooltipDemo = () => {
  const accepted = $(false);
  
  return Tooltip({ 
    tip: "You must accept the terms to continue" 
  }, 
    Checkbox({
      label: 'I accept the terms',
      value: accepted,
      onclick: () => accepted(!accepted())
    })
  );
};
Mount(TooltipDemo, '#demo-tooltip');

All Variants

Live Demo

const VariantsDemo = () => {
  const variant1 = $(true);
  const variant2 = $(false);
  const variant3 = $(true);
  
  return Div({ class: 'flex flex-col gap-3' }, [
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Primary',
        value: variant1,
        class: 'checkbox-primary',
        onclick: () => variant1(!variant1())
      }),
      Checkbox({
        label: 'Secondary',
        value: variant2,
        class: 'checkbox-secondary',
        onclick: () => variant2(!variant2())
      })
    ]),
    Div({ class: 'flex items-center gap-4' }, [
      Checkbox({
        label: 'Accent',
        value: variant3,
        class: 'checkbox-accent',
        onclick: () => variant3(!variant3())
      }),
      Checkbox({
        label: 'Toggle switch',
        value: $(false),
        toggle: true,
        class: 'toggle-primary'
      })
    ])
  ]);
};
Mount(VariantsDemo, '#demo-variants');

Form Example

Live Demo

const FormDemo = () => {
  const subscribe = $(false);
  const weekly = $(false);
  const monthly = $(true);
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'text-sm font-bold' }, 'Newsletter preferences'),
    Checkbox({
      label: 'Subscribe to newsletter',
      value: subscribe,
      onclick: () => subscribe(!subscribe())
    }),
    () => subscribe() ? Div({ class: 'ml-6 flex flex-col gap-2' }, [
      Checkbox({
        label: 'Weekly updates',
        value: weekly,
        onclick: () => weekly(!weekly())
      }),
      Checkbox({
        label: 'Monthly digest',
        value: monthly,
        onclick: () => monthly(!monthly())
      })
    ]) : null,
    () => subscribe() && (weekly() || monthly())
      ? Div({ class: 'alert alert-success text-sm mt-2' }, 'You will receive updates!')
      : subscribe()
      ? Div({ class: 'alert alert-warning text-sm mt-2' }, 'Select at least one frequency')
      : null
  ]);
};
Mount(FormDemo, '#demo-form');