Blocks

Label

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

Usage

Email address

sui.label "Email address"

Linked to an input

Username

tag.div(class: "space-y-2") do
  sui.label("Username", for_id: "username") +
  sui.input(id: "username", placeholder: "johndoe")
end

Multiple fields

First name

Last name

tag.div(class: "space-y-4") do
  tag.div(class: "space-y-2") do
    sui.label("First name", for_id: "first-name") +
    sui.input(id: "first-name", placeholder: "Jane")
  end +
  tag.div(class: "space-y-2") do
    sui.label("Last name", for_id: "last-name") +
    sui.input(id: "last-name", placeholder: "Doe")
  end
end

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.