Label

New

Overview

You will rarely use Label directly. Dizzy form controls create and associate labels automatically when passed Phoenix form fields. Use Label when you need to compose a form control manually. It is a dependency of every other form control, so installing any of them installs Label automatically.

Full name

HEEx

<div class="example-fields w-full">
  <Label.label for="example-full-name">Full name</Label.label>
  <input
    id="example-full-name"
    name="full_name"
    class="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-control text-foreground shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground"
    placeholder="Ada Lovelace"
  />
</div>

Required

Set required to show “(required)” as the sublabel. An explicit sublabel takes precedence.

Email (required)

Password (at least 12 characters)

HEEx

<div class="example-fields grid w-full gap-6">
  <div>
    <Label.label for="required-email" required>Email</Label.label>
    <input
      id="required-email"
      name="email"
      type="email"
      required
      class="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-control text-foreground shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground"
      placeholder="ada@example.com"
    />
  </div>

  <div>
    <Label.label for="required-password" sublabel="(at least 12 characters)" required>
      Password
    </Label.label>
    <input
      id="required-password"
      name="password"
      type="password"
      required
      class="mt-2 h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-control text-foreground shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground"
    />
  </div>
</div>

Add this module

terminal

mix dizzy.add label

Component API

Label.label

Attributes

Attributes for Label.label
Name	Type	Default	Values
`class`	`:any`	nil	—
`disabled`	`:boolean`	false	—
`for`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`sublabel`	`:string`	nil	—

Slots

Slots for Label.label
Name	Required
`inner_block`	Required