Switch
UI::SwitchAn on/off toggle.
# 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>
```
bin/rails generate velvetkit:add switch- Also adds
- Nothing else
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
Default
default.html.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>Sizes
sizes.html.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>States
states.html.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>API
Arguments
UI::Switch.new(name: nil, value: "1", checked: false, label: nil, size: :default, required: false, disabled: false, class: nil, **html_attrs)