480 lines
15 KiB
Markdown
480 lines
15 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 |
|
|
|
|
## 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');
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initCheckboxExamples = () => {
|
|
|
|
// 1. Basic Checkbox
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
const BasicDemo = () => {
|
|
const accepted = $(false);
|
|
|
|
return Checkbox({
|
|
label: 'I accept the terms and conditions',
|
|
value: accepted,
|
|
onclick: () => accepted(!accepted())
|
|
});
|
|
};
|
|
$mount(BasicDemo, basicTarget);
|
|
}
|
|
|
|
// 2. Toggle Switch
|
|
const toggleTarget = document.querySelector('#demo-toggle');
|
|
if (toggleTarget && !toggleTarget.hasChildNodes()) {
|
|
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, toggleTarget);
|
|
}
|
|
|
|
// 3. With Tooltip
|
|
const tooltipTarget = document.querySelector('#demo-tooltip');
|
|
if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
|
|
const TooltipDemo = () => {
|
|
const darkMode = $(false);
|
|
|
|
return Checkbox({
|
|
label: 'Dark mode',
|
|
value: darkMode,
|
|
tooltip: 'Enable dark theme preference',
|
|
onclick: () => darkMode(!darkMode())
|
|
});
|
|
};
|
|
$mount(TooltipDemo, tooltipTarget);
|
|
}
|
|
|
|
// 4. Disabled State
|
|
const disabledTarget = document.querySelector('#demo-disabled');
|
|
if (disabledTarget && !disabledTarget.hasChildNodes()) {
|
|
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, disabledTarget);
|
|
}
|
|
|
|
// 5. Reactive Multiple Selection
|
|
const multipleTarget = document.querySelector('#demo-multiple');
|
|
if (multipleTarget && !multipleTarget.hasChildNodes()) {
|
|
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, multipleTarget);
|
|
}
|
|
|
|
// 6. All Variants
|
|
const variantsTarget = document.querySelector('#demo-variants');
|
|
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
|
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, variantsTarget);
|
|
}
|
|
|
|
// 7. Form Example
|
|
const formTarget = document.querySelector('#demo-form');
|
|
if (formTarget && !formTarget.hasChildNodes()) {
|
|
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, formTarget);
|
|
}
|
|
};
|
|
|
|
initCheckboxExamples();
|
|
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initCheckboxExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|