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"
5end
6 Checkbox :checked 7end
8end
# Primary color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :primary 7end
8end
# Secondary color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :secondary 7end
8end
# Accent color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :accent 7end
8end
# Success color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :success 7end
8end
# Warning color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :warning 7end
8end
# Info color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :info 7end
8end
# Error color
1 FormControl class: "w-52" do 2 Label class: "cursor-pointer" do |label| 3 label.text do 4"Remember me"
5end
6 Checkbox :checked, :error 7end
8end
# 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 JS
1 Checkbox id: :my_checkbox 2 3 script do 4 <<-JS.html_safe 5document.getElementById("my_checkbox").indeterminate = true
6JS
7end
# 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