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