Label

Form label with optional sublabel and description.

Basic

.heex 
<.label>Full Name</.label>

Sublabel

Set sublabel to render muted text inline to the right of the label.

(min 5 characters)
.heex 
<.label sublabel="(min 5 characters)">Username</.label>

Description

Set description to render helper text in a block below the label.

It should match the name on your passport.

.heex 
<.label description="It should match the name on your passport.">
  Full Name
</.label>

Sublabel and description

Combine sublabel and description for a name, an inline qualifier, and supporting text underneath.

Required

We send order confirmations and shipping updates here.

.heex 
<.label
  sublabel="Required"
  description="We send order confirmations and shipping updates here."
>
  Email Address
</.label>

Required field

Place a colored marker directly in the slot to flag a required field with an asterisk.

.heex 
<.label for="password">
  Password <span class="text-danger">*</span>
</.label>

Optional field

Set sublabel to "Optional" to mark a non-required field in muted text.

Optional
.heex 
<.label for="company" sublabel="Optional">Company</.label>

Linking with for

Set for to the input's id so clicking the label focuses the field.

.heex 
<div class="space-y-2">
  <.label for="newsletter-email">Email Address</.label>
  <input
    id="newsletter-email"
    type="email"
    class="w-full rounded-md border border-base px-3 py-2 text-sm"
  />
</div>

Phoenix form field

Pass a %Phoenix.HTML.FormField{} to for and the label resolves the input id from the field.

Required
.heex 
<.form :let={f} for={@form} phx-submit="save" class="space-y-2">
  <.label for={f[:email]} sublabel="Required">Email Address</.label>
  <.input field={f[:email]} type="email" />
</.form>

Custom styling

Pass utilities through class to override size, weight, or tone.

.heex 
<.label class="text-base">Display Name</.label>
<.label class="uppercase tracking-wide text-xs text-foreground-soft">
  Account
</.label>

Rich label content

The default slot accepts arbitrary HEEx, so icons or inline emphasis can sit next to the label text.

.heex 
<.label for="api-key">
  API Key <.icon name="hero-information-circle" class="size-4 text-foreground-softer ml-1 -mt-0.5" />
</.label>

Stacked form

Pair labels with native or Fluxon controls to build a full form, with vertical spacing between each label-and-field pair.

Required

Up to 160 characters. This appears on your public profile.

.heex 
<.form :let={f} for={@form} phx-submit="save" class="space-y-5">
  <div class="space-y-2">
    <.label for={f[:name]}>Full Name</.label>
    <.input field={f[:name]} placeholder="Ada Lovelace" />
  </div>

  <div class="space-y-2">
    <.label for={f[:email]} sublabel="Required">Email Address</.label>
    <.input field={f[:email]} type="email" placeholder="ada@example.com" />
  </div>

  <div class="space-y-2">
    <.label
      for={f[:bio]}
      description="Up to 160 characters. This appears on your public profile."
    >
      Bio
    </.label>
    <.textarea field={f[:bio]} rows={3} />
  </div>
</.form>