Checkbox
| Modifier | DaisyUI class |
|---|---|
| :primary | checkbox-primary |
| :secondary | checkbox-secondary |
| :accent | checkbox-accent |
| :success | checkbox-success |
| :warning | checkbox-warning |
| :info | checkbox-info |
| :error | checkbox-error |
| :lg | checkbox-lg |
| :md | checkbox-md |
| :sm | checkbox-sm |
| :xs | checkbox-xs |
# Checkbox
1
Checkbox :checked
# With label and form-control
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked
7
end
8
end
# Primary color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :primary
7
end
8
end
# Secondary color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :secondary
7
end
8
end
# Accent color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :accent
7
end
8
end
# Success color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :success
7
end
8
end
# Warning color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :warning
7
end
8
end
# Info color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :info
7
end
8
end
# Error color
1
FormControl class: "w-52" do
2
Label class: "cursor-pointer" do |label|
3
label.text do
4
"Remember me"
5
end
6
Checkbox :checked, :error
7
end
8
end
# Sizes
1
Checkbox :checked, :xs
2
Checkbox :checked, :sm
3
Checkbox :checked, :md
4
Checkbox :checked, :lg
# Disabled
1
Checkbox :disabled
# Disabled and checked
1
Checkbox :checked, :disabled
# Indeterminate
You can make a checkbox indeterminate using JS1
Checkbox id: :my_checkbox
2
3
script do
4
<<-JS.html_safe
5
document.getElementById("my_checkbox").indeterminate = true
6
JS
7
end
# Checkbox with custom colors
1
custom_colors_classes_1 = [
2
"border-orange-400",
3
"[--chkbg:theme(colors.indigo.600)]",
4
"[--chkfg:orange]",
5
"checked:border-indigo-800"
6
]
7
8
custom_colors_classes_2 = [
9
"[--chkbg:oklch(var(--a))]",
10
"[--chkfg:oklch(var(--p))]"
11
]
12
13
Checkbox :checked, class: custom_colors_classes_1
14
Checkbox :checked, class: custom_colors_classes_2