Switch

Um controle que permite ligar ou desligar uma opção.

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 switch --yes

O item switch do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/switch_component.rb
app/helpers/ui/switch_helper.rb
vendor/shadwire/shadwire.css

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

Uso

O componente estiliza um <input type="checkbox"> nativo com role="switch". A bolinha que desliza é desenhada pelo utilitário .shadwire-switch.

<%= ui_switch(id: "airplane-mode") %>
<%= ui_label(for: "airplane-mode") { "Airplane mode" } %>

Ou renderize o componente Ui::SwitchComponent diretamente:

<%= render Ui::SwitchComponent.new(name: "settings[airplane]", checked: true) %>

Exemplos

Padrão

Um checkbox nativo com role="switch", para os leitores de tela o anunciarem como interruptor.

Airplane mode

<div class="flex items-center gap-2">
  <%= ui_switch(id: "switch-airplane") %>
  <%= ui_label(for: "switch-airplane") { "Airplane mode" } %>
</div>

Ligado

Use checked: true para iniciar ligado; combine com textos auxiliares.

Notifications

Get notified about activity on your account.

<div class="flex items-start gap-2">
  <%= ui_switch(id: "switch-notifications", checked: true) %>
  <div class="grid gap-1">
    <%= ui_label(for: "switch-notifications") { "Notifications" } %>
    <p class="text-sm text-muted-foreground">Get notified about activity on your account.</p>
  </div>
</div>

Desabilitado

disabled: true desabilita o input nativo.

Unavailable

<div class="flex items-center gap-2">
  <%= ui_switch(id: "switch-disabled", disabled: true) %>
  <%= ui_label(for: "switch-disabled", class: "opacity-50") { "Unavailable" } %>
</div>

Com form_with

Use form.field_name/form.field_id. Não há input hidden, então trate a ausência do parâmetro como desligado.

<%= form_with url: "#", scope: :settings do |form| %>
  <div class="flex items-center gap-2">
    <%= ui_switch(name: form.field_name(:marketing), id: form.field_id(:marketing), value: "1") %>
    <%= ui_label(for: form.field_id(:marketing)) { "Receber e-mails de marketing" } %>
  </div>
<% end %>

Referência da API

ui_switch(**options) encapsula Ui::SwitchComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`checked`	Boolean	`false`	Renderiza o switch ligado.
`disabled`	Boolean	`false`	Desabilita o input nativo.
`class` / `class_name`	String	`nil`	Classes extras, mescladas após as classes base.
`**attrs`	Hash	`{}`	Atributos HTML livres (`name`, `id`, `value`, `data:`, `aria:`, …).