290 lines
8.3 KiB
Markdown
290 lines
8.3 KiB
Markdown
# Checkbox
|
||
|
||
Toggle checkbox component with label, tooltip 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 |
|
||
| `tooltip` | `string` | `-` | Tooltip text on hover |
|
||
| `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](https://daisyui.com/components/checkbox) and [daisyUI Toggle Documentation](https://daisyui.com/components/toggle) – Full reference for CSS classes.
|
||
|
||
### Example
|
||
|
||
```javascript
|
||
// 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
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-toggle" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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');
|
||
```
|
||
|
||
### With Tooltip
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
const TooltipDemo = () => {
|
||
const darkMode = $(false);
|
||
|
||
return Checkbox({
|
||
label: 'Dark mode',
|
||
value: darkMode,
|
||
tooltip: 'Enable dark theme preference',
|
||
onclick: () => darkMode(!darkMode())
|
||
});
|
||
};
|
||
$mount(TooltipDemo, '#demo-tooltip');
|
||
```
|
||
|
||
### Disabled State
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-multiple" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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');
|
||
```
|
||
|
||
### All Variants
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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
|
||
|
||
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
||
<div class="card-body">
|
||
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
||
<div id="demo-form" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
||
</div>
|
||
</div>
|
||
|
||
```javascript
|
||
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');
|
||
``` |