Radio Group

Um conjunto de opções mutuamente exclusivas, construído sobre radios nativos.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add radio-group --yes

O item radio-group do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/radio_group_component.rb
app/components/ui/radio_group/item_component.rb
app/helpers/ui/radio_group_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Itens com o mesmo name: formam um grupo, e o navegador cuida da seleção única e da navegação pelas setas. Rotule o grupo com aria: { label: }.

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
<% end %>

Ou renderize os componentes diretamente:

<%= render Ui::RadioGroupComponent.new do %>
  <%= render Ui::RadioGroup::ItemComponent.new(name: "plan", value: "free") %>
<% end %>

Composição

Cada item é um <input type="radio"> nativo; o name: é repetido por item porque o ViewComponent não injeta contexto do pai.

RadioGroup
`-- RadioGroup::Item (one per option, same name:)

Exemplos

Padrão

Radios nativos com o mesmo name:, então o navegador cuida da navegação pelas setas.

Default

Comfortable

Compact

<%= ui_radio_group(aria: { label: "Interface density" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "default", id: "density-default", checked: true) %>
    <%= ui_label(for: "density-default") { "Default" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "comfortable", id: "density-comfortable") %>
    <%= ui_label(for: "density-comfortable") { "Comfortable" } %>

<%= ui_radio_group(aria: { label: "Interface density" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "default", id: "density-default", checked: true) %>
    <%= ui_label(for: "density-default") { "Default" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "comfortable", id: "density-comfortable") %>
    <%= ui_label(for: "density-comfortable") { "Comfortable" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "density", value: "compact", id: "density-compact") %>
    <%= ui_label(for: "density-compact") { "Compact" } %>
  </div>
<% end %>

Item desabilitado

disabled: true desabilita um item específico sem afetar o grupo.

Free

Enterprise (coming soon)

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "enterprise", id: "plan-enterprise", disabled: true) %>
    <%= ui_label(for: "plan-enterprise", class: "opacity-50") { "Enterprise (coming soon)" } %>

<%= ui_radio_group(aria: { label: "Plan" }) do %>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "free", id: "plan-free", checked: true) %>
    <%= ui_label(for: "plan-free") { "Free" } %>
  </div>
  <div class="flex items-center gap-2">
    <%= ui_radio_group_item(name: "plan", value: "enterprise", id: "plan-enterprise", disabled: true) %>
    <%= ui_label(for: "plan-enterprise", class: "opacity-50") { "Enterprise (coming soon)" } %>
  </div>
<% end %>

Com form_with

Use form.field_name para o name compartilhado e form.field_id(attr, valor) para cada id.

<%= form_with url: "#", scope: :subscription do |form| %>
  <%= ui_radio_group(aria: { label: "Billing cycle" }) do %>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "monthly",
            id: form.field_id(:cycle, "monthly"),
            checked: true

<%= form_with url: "#", scope: :subscription do |form| %>
  <%= ui_radio_group(aria: { label: "Billing cycle" }) do %>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "monthly",
            id: form.field_id(:cycle, "monthly"),
            checked: true
          ) %>
      <%= ui_label(for: form.field_id(:cycle, "monthly")) { "Monthly" } %>
    </div>
    <div class="flex items-center gap-2">
      <%= ui_radio_group_item(
            name: form.field_name(:cycle),
            value: "yearly",
            id: form.field_id(:cycle, "yearly")
          ) %>
      <%= ui_label(for: form.field_id(:cycle, "yearly")) { "Yearly" } %>
    </div>
  <% end %>
<% end %>

Referência da API

ui_radio_group(**options, &block) e ui_radio_group_item(**options) encapsulam os componentes correspondentes.

Componente	Argumento	Padrão	Descrição
`RadioGroup`	`class` / `class_name`, `**attrs`	—	Container `role="radiogroup"`; rotule com `aria: { label: }`.
`RadioGroup::Item`	`name:` (obrigatório)	—	Nome compartilhado do grupo de radios.
`RadioGroup::Item`	`value:` (obrigatório)	—	Valor submetido quando o item está selecionado.
`RadioGroup::Item`	`checked` / `disabled`	`false`	Estado inicial do input nativo.
`RadioGroup::Item`	`**attrs`	`{}`	Atributos HTML livres (`id`, `data:`, `aria:`, …).