Checkbox
UI::CheckboxA checkbox with label, standalone or bound to a form builder.
# VelvetKit
## Checkbox (`UI::Checkbox`)
A checkbox with label, standalone or bound to a form builder.
Add it: `bin/rails generate velvetkit:add checkbox`
Also adds: `label`, `form_field`, `icon`
### Arguments
```ruby
UI::Checkbox.new(name: nil, value: "1", unchecked_value: "0", checked: false, label: nil, hint: nil, size: :default, form: nil, field: nil, required: false, error: nil, disabled: false, class: nil, **html_attrs)
```
### Example: States
```erb
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "unchecked")) %>
<span class="text-sm text-muted-foreground">Unchecked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "checked", checked: true)) %>
<span class="text-sm text-muted-foreground">Checked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "disabled", disabled: true)) %>
<span class="text-sm text-muted-foreground">Disabled</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "disabled-checked", disabled: true, checked: true)) %>
<span class="text-sm text-muted-foreground">Disabled + Checked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "error", error: true)) %>
<span class="text-sm text-destructive">Error</span>
</div>
</div>
```
### Example: With Label
```erb
<div class="flex flex-col gap-4">
<%= render(UI::Checkbox.new(name: "small", label: "Small checkbox", size: :sm)) %>
<%= render(UI::Checkbox.new(name: "default", label: "Default checkbox", size: :default)) %>
<%= render(UI::Checkbox.new(name: "large", label: "Large checkbox", size: :lg)) %>
</div>
```
### Example: In Form
```erb
<form class="space-y-4 border rounded-md p-6 max-w-sm" action="#" method="post">
<fieldset class="space-y-3">
<legend class="text-sm font-medium mb-2">Notification preferences</legend>
<%= render(UI::Checkbox.new(name: "prefs[email]", checked: true, label: "Email notifications")) %>
<%= render(UI::Checkbox.new(name: "prefs[push]", label: "Push notifications")) %>
<%= render(UI::Checkbox.new(name: "prefs[sms]", disabled: true, label: "SMS (unavailable)")) %>
</fieldset>
<%= render(UI::Button.new(type: :submit)) { "Save preferences" } %>
</form>
```
bin/rails generate velvetkit:add checkbox- Also adds
- Label Form field Icon
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
States
Unchecked
Checked
Disabled
Disabled + Checked
Error
states.html.erb
<div class="flex flex-col gap-4">
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "unchecked")) %>
<span class="text-sm text-muted-foreground">Unchecked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "checked", checked: true)) %>
<span class="text-sm text-muted-foreground">Checked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "disabled", disabled: true)) %>
<span class="text-sm text-muted-foreground">Disabled</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "disabled-checked", disabled: true, checked: true)) %>
<span class="text-sm text-muted-foreground">Disabled + Checked</span>
</div>
<div class="flex items-center gap-4">
<%= render(UI::Checkbox.new(name: "error", error: true)) %>
<span class="text-sm text-destructive">Error</span>
</div>
</div>With Label
with_label.html.erb
<div class="flex flex-col gap-4">
<%= render(UI::Checkbox.new(name: "small", label: "Small checkbox", size: :sm)) %>
<%= render(UI::Checkbox.new(name: "default", label: "Default checkbox", size: :default)) %>
<%= render(UI::Checkbox.new(name: "large", label: "Large checkbox", size: :lg)) %>
</div>In Form
in_form.html.erb
<form class="space-y-4 border rounded-md p-6 max-w-sm" action="#" method="post">
<fieldset class="space-y-3">
<legend class="text-sm font-medium mb-2">Notification preferences</legend>
<%= render(UI::Checkbox.new(name: "prefs[email]", checked: true, label: "Email notifications")) %>
<%= render(UI::Checkbox.new(name: "prefs[push]", label: "Push notifications")) %>
<%= render(UI::Checkbox.new(name: "prefs[sms]", disabled: true, label: "SMS (unavailable)")) %>
</fieldset>
<%= render(UI::Button.new(type: :submit)) { "Save preferences" } %>
</form>API
Arguments
UI::Checkbox.new(name: nil, value: "1", unchecked_value: "0", checked: false, label: nil, hint: nil, size: :default, form: nil, field: nil, required: false, error: nil, disabled: false, class: nil, **html_attrs)