Demo
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- Default Checkbox -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" type="hidden" value="0" autocomplete="off" /><input class="text-brand bg-neutral-secondary-medium border-default-medium rounded-sm focus:ring-brand focus:ring-2 w-4 h-4" type="checkbox" value="1" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_confirmation">Confirmation</label>
  </div>
</div>
<!-- Checked State -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" type="hidden" value="0" autocomplete="off" /><input class="text-brand bg-neutral-secondary-medium border-default-medium rounded-sm focus:ring-brand focus:ring-2 w-4 h-4" type="checkbox" value="1" checked="checked" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_confirmation">Confirmation</label>
  </div>
</div>
<!-- With Custom Label -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" type="hidden" value="0" autocomplete="off" /><input class="text-brand bg-neutral-secondary-medium border-default-medium rounded-sm focus:ring-brand focus:ring-2 w-4 h-4" type="checkbox" value="1" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_confirmation">I agree with the terms and conditions.</label>
  </div>
</div>
<!-- With Custom Value -->
<div class="flex">
  <div class="flex items-center h-5"><input name="person[confirmation]" type="hidden" value="0" autocomplete="off" /><input class="text-brand bg-neutral-secondary-medium border-default-medium rounded-sm focus:ring-brand focus:ring-2 w-4 h-4" type="checkbox" value="yes" name="person[confirmation]" id="person_confirmation" /></div>
  <div class="ms-2 text-sm">
    <label class="font-medium text-heading" for="person_confirmation">This checkbox submits 'yes' when checked.</label>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
# Default Checkbox
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form))
# Checked State
person.confirmation = true
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form))
# With Custom Label
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form, label: {content: "I agree with the terms and conditions."}))
# With Custom Value
render(Flowbite::InputField::Checkbox.new(attribute: :confirmation, form: form, input: {value: "yes"}, label: {content: "This checkbox submits 'yes' when checked."}))

Use this default example of a checkbox element in a checked and unchecked state.

No params configured.