Checkbox

ModifierDaisyUI class
:primarycheckbox-primary
:secondarycheckbox-secondary
:accentcheckbox-accent
:successcheckbox-success
:warningcheckbox-warning
:infocheckbox-info
:errorcheckbox-error
:lgcheckbox-lg
:mdcheckbox-md
:smcheckbox-sm
:xscheckbox-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 JS
1
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