Radio group
UI::RadioGroupA set of radio buttons.
# VelvetKit
## Radio group (`UI::RadioGroup`)
A set of radio buttons.
Add it: `bin/rails generate velvetkit:add radio_group`
### Arguments
```ruby
UI::RadioGroup.new(name: nil, value: nil, size: :default, required: false, disabled: false, class: nil, **html_attrs)
```
Slots: `with_item`
### Example: Default
```erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Default</h3>
<%= render(UI::RadioGroup.new(name: "default_plan", value: "free")) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
<% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
<% end %>
</div>
</div>
```
### Example: With Required
```erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Required</h3>
<%= render(UI::RadioGroup.new(name: "required_plan", value: "pro", required: true)) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
<% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
<% end %>
</div>
</div>
```
### Example: Disabled
```erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Disabled</h3>
<%= render(UI::RadioGroup.new(name: "disabled_plan", disabled: true)) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan (selected)", checked: true) %>
<% end %>
</div>
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Individual item disabled</h3>
<%= render(UI::RadioGroup.new(name: "partial_disabled", value: "free")) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan (unavailable)", disabled: true) %>
<% rg.with_item(value: "enterprise", label: "Enterprise") %>
<% end %>
</div>
</div>
```
bin/rails generate velvetkit:add radio_group- Also adds
- Nothing else
- Stimulus
- None, it's server-rendered
- Installs
- Nothing
Examples
Default
Default
default.html.erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Default</h3>
<%= render(UI::RadioGroup.new(name: "default_plan", value: "free")) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
<% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
<% end %>
</div>
</div>With Required
Required
with_required.html.erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Required</h3>
<%= render(UI::RadioGroup.new(name: "required_plan", value: "pro", required: true)) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan — $9/mo") %>
<% rg.with_item(value: "enterprise", label: "Enterprise — Contact us") %>
<% end %>
</div>
</div>Disabled
Disabled
Individual item disabled
disabled.html.erb
<div class="space-y-6">
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Disabled</h3>
<%= render(UI::RadioGroup.new(name: "disabled_plan", disabled: true)) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan (selected)", checked: true) %>
<% end %>
</div>
<div>
<h3 class="text-sm font-medium mb-2 text-muted-foreground">Individual item disabled</h3>
<%= render(UI::RadioGroup.new(name: "partial_disabled", value: "free")) do |rg| %>
<% rg.with_item(value: "free", label: "Free plan") %>
<% rg.with_item(value: "pro", label: "Pro plan (unavailable)", disabled: true) %>
<% rg.with_item(value: "enterprise", label: "Enterprise") %>
<% end %>
</div>
</div>API
Arguments
UI::RadioGroup.new(name: nil, value: nil, size: :default, required: false, disabled: false, class: nil, **html_attrs)
Slots:
with_item