Blocks

Label

An accessible <label> element with consistent typography. Use for_id: to associate it with an input.

Installation

bin/rails g shadcnrb:component label

Usage

Email address

<%= sui.label "Email address" %>

Linked to an input

Username

<div class="space-y-2 w-[320px]">
  <%= sui.label "Username", for_id: "username2" %>
  <%= sui.input id: "username2", placeholder: "johndoe" %>
</div>

Multiple fields

First name

Last name

<div class="space-y-4 w-[320px]">
  <div class="space-y-2">
    <%= sui.label "First name", for_id: "first-name" %>
    <%= sui.input id: "first-name", placeholder: "Jane" %>
  </div>
  <div class="space-y-2">
    <%= sui.label "Last name", for_id: "last-name" %>
    <%= sui.input id: "last-name", placeholder: "Doe" %>
  </div>
</div>

With block content

I agree to the terms

<%= sui.label(for_id: "agree") do %>
  <%= tag.span "I agree to the " %>
  <%= link_to "terms", "#", class: "underline underline-offset-4" %>
<% end %>

API

name	type	default	description
`name`	String	`nil`	Label text. Can alternatively be provided as a block for richer content.
`for_id`	String	`nil`	Value of the `for` attribute; links the label to an input with the matching `id`.
`**opts`	Hash	—	Any additional HTML attribute passed through to the `<label>` element.