# 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>
```