# VelvetKit

## Switch (`UI::Switch`)

An on/off toggle.

Add it: `bin/rails generate velvetkit:add switch`

### Arguments

```ruby
UI::Switch.new(name: nil, value: "1", checked: false, label: nil, size: :default, required: false, disabled: false, class: nil, **html_attrs)
```

### Example: Default

```erb
<div class="flex flex-col gap-4">
  <%= render(UI::Switch.new(name: "default_off", label: "Airplane mode")) %>
  <%= render(UI::Switch.new(name: "default_on", checked: true, label: "Wi-Fi")) %>
</div>
```

### Example: Sizes

```erb
<div class="flex flex-col gap-4">
  <%= render(UI::Switch.new(name: "sm", size: :sm, label: "Small")) %>
  <%= render(UI::Switch.new(name: "default", size: :default, label: "Default")) %>
  <%= render(UI::Switch.new(name: "lg", size: :lg, label: "Large")) %>
</div>
```

### Example: States

```erb
<div class="flex flex-col gap-4">
  <%= render(UI::Switch.new(name: "unchecked", label: "Off")) %>
  <%= render(UI::Switch.new(name: "checked", checked: true, label: "On")) %>
  <%= render(UI::Switch.new(name: "disabled_off", disabled: true, label: "Disabled off")) %>
  <%= render(UI::Switch.new(name: "disabled_on", checked: true, disabled: true, label: "Disabled on")) %>
  <%= render(UI::Switch.new(name: "no_label")) %>
</div>
```