shadcn-rails

Label

Renders an accessible label associated with form controls.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:add label

Usage

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "email") { "Email" } %>
  <%= render Shadcn::InputComponent.new(type: "email", id: "email", placeholder: "Email") %>
</div>

Examples

With Input

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "email-example") { "Email" } %>
  <%= render Shadcn::InputComponent.new(type: "email", id: "email-example", placeholder: "Email") %>
</div>

Required

Set required: true to show a required indicator.

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "name-required", required: true) { "Full Name" } %>
  <%= render Shadcn::InputComponent.new(id: "name-required", required: true, placeholder: "Enter your name") %>
</div>

With Checkbox

<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "terms-checkbox") %>
  <%= render Shadcn::Label.new(for: "terms-checkbox") { "Accept terms and conditions" } %>
</div>

Disabled State

When the associated input is disabled, the label automatically adjusts its styling via the peer-disabled CSS classes.

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "disabled-input") { "Disabled Field" } %>
  <%= render Shadcn::InputComponent.new(id: "disabled-input", disabled: true, value: "Cannot edit", class_name: "peer") %>
</div>

Required Field

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "required-field", required: true) { "Name" } %>
  <%= render Shadcn::InputComponent.new(id: "required-field", required: true, placeholder: "Enter your name") %>
</div>

Optional Field

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "optional-field") { "Phone Number" } %>
  <%= render Shadcn::InputComponent.new(type: "tel", id: "optional-field", placeholder: "Optional") %>
</div>

Custom Styling

<div class="grid w-full max-w-sm items-center gap-1.5">
  <%= render Shadcn::Label.new(for: "bio", class_name: "text-lg font-bold") { "Biography" } %>
  <%= render Shadcn::InputComponent.new(id: "bio", placeholder: "Tell us about yourself") %>
</div>

Form Example

<div class="grid w-full max-w-sm gap-4">
  <div class="grid gap-1.5">
    <%= render Shadcn::Label.new(for: "form-name", required: true) { "Name" } %>
    <%= render Shadcn::InputComponent.new(id: "form-name", placeholder: "Jane Doe") %>
  </div>
  <div class="grid gap-1.5">
    <%= render Shadcn::Label.new(for: "form-email") { "Email" } %>
    <%= render Shadcn::InputComponent.new(type: "email", id: "form-email", placeholder: "jane@example.com") %>
  </div>
</div>

Without For

<%= render Shadcn::Label.new do %>
  Standalone Label
<% end %>

Disabled Context

<div class="grid w-full max-w-sm items-center gap-1.5 opacity-50">
  <%= render Shadcn::Label.new(for: "disabled") { "Disabled Field" } %>
  <%= render Shadcn::Input.new(id: "disabled", disabled: true, placeholder: "Disabled input") %>
</div>

API Reference

API Reference

Prop Type Default Description
for String nil The ID of the input element this label is for
required Boolean false Whether to show a required indicator (*)
class_name String nil Additional CSS classes to apply

Accessibility

  • Uses native <label> element for proper accessibility
  • Always use the for attribute to associate labels with their inputs
  • The required indicator uses aria-hidden="true" since the input's required attribute provides the semantic information
  • Labels respond to disabled state via CSS peer selectors