Label

Renderiza um rótulo acessível associado a um controle de formulário.

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

O item label do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/label_component.rb
app/helpers/ui/label_helper.rb
vendor/shadwire/shadwire.css

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

Uso

Use o helper ui_label. for é palavra reservada em Ruby, então ele é passado como um atributo HTML comum. Aponte-o para o id do controle.

<%= ui_label(for: "email") { "Email" } %>
<%= ui_input(type: :email, id: "email") %>

Ou renderize o componente Ui::LabelComponent diretamente:

<%= render Ui::LabelComponent.new(for: "email") do %>
  Email
<% end %>

Exemplos

Padrão

Associe o rótulo ao campo com for: apontando para o id do controle.

Username

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "label-demo-username") { "Username" } %>
  <%= ui_input(id: "label-demo-username", placeholder: "shadwire") %>
</div>

Grupo desabilitado

Dentro de um grupo com data-disabled, o rótulo fica esmaecido.

E-mail

<div class="group grid w-full max-w-sm gap-2" data-disabled="true">
  <%= ui_label(for: "label-demo-disabled") { "E-mail" } %>
  <%= ui_input(type: :email, id: "label-demo-disabled", placeholder: "voce@exemplo.com", disabled: true) %>
</div>

Referência da API

ui_label(**options, &block) encapsula Ui::LabelComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`class` / `class_name`	String	`nil`	Classes extras, mescladas após as classes base.
`**attrs`	Hash	`{}`	Atributos HTML livres (`for`, `id`, `data:`, `aria:`, …).
`&block`	Block	—	O conteúdo do rótulo: texto, ícones ou os dois.