Label

Renders an accessible label tied to a form control.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add label --yes

The label registry item installs these files:

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

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Use the ui_label helper. for is a reserved word in Ruby, so it is passed as an ordinary HTML attribute. Point it at the id of the control.

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

Or render the component Ui::LabelComponent directly:

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

Examples

Default

Tie the label to the field with for: pointing at the control's id.

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>

Disabled group

Inside a group carrying data-disabled, the label dims automatically.

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

API reference

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

Argument	Type	Default	Description
`class` / `class_name`	String	`nil`	Extra classes, merged after the base classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`for`, `id`, `data:`, `aria:`, …).
`&block`	Block	—	The label's content: text, icons or both.