shadcn-rails

Label

Renders an accessible label associated with form controls.

No JavaScript Required

Installation

Add the component to your project:

rails generate shadcn:component label

Usage

<%= render Shadcn::LabelComponent.new(for: "email") { "Your email address" } %>

Examples

With Input

Required

Set required: true to show a required indicator.

<%= render Shadcn::LabelComponent.new(for: "name", required: true) { "Name" } %>

With Checkbox

Disabled State

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

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