Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Forms.field

Server-rendered

Field wrapper for label, control, description, and errors.

field/1 remains the simplest composition helper. It automatically wraps the control passed to its inner block with field_control/1, so most usages should pass the form control directly and use the :label, :description, :message, and :error slots for supporting content.

Reach for field_label/1, field_control/1, field_description/1, field_message/1, and field_error/1 when you need the standalone helper or want to compose the pieces outside field/1.

Profile field

Shown in your profile.

  <.field>
  <:label><.label for="name">Name</.label></:label>
  <.input id="name" name="name" />
  <:description>Shown in your profile.</:description>
</.field>

Validation state

We'll send deployment alerts here.

Please use your company domain.

  <.field>
  <:label><.label for="email">Work email</.label></:label>
  <.input id="email" name="email" type="email" />
  <:description>We'll send deployment alerts here.</:description>
  <:error>Please use your company domain.</:error>
</.field>

Field with slots

Used in your public workspace URL.

Slug has already been taken.

  <.field invalid={true}>
  <:label>
    <.label for="workspace-slug">Workspace slug</.label>
  </:label>
  <.input id="workspace-slug" name="workspace[slug]" value="cinder-ui" />
  <:description>Used in your public workspace URL.</:description>
  <:error>Slug has already been taken.</:error>
</.field>

Phoenix validation flow

Choose the teammate responsible for this workspace.

Please choose a teammate.

  <.form for={%{}} phx-change="validate" phx-submit="save" class="space-y-6">
  <.field invalid={true}>
    <:label>
      <.label for="owner">Owner</.label>
    </:label>

    <.autocomplete
      id="owner"
      name="owner"
      value="levi"
      aria-label="Owner"
    >
      <:option value="levi" label="Levi Buzolic" description="Engineering" />
      <:option value="mira" label="Mira Chen" description="Design" />
      <:empty>No matching teammates.</:empty>
    </.autocomplete>

    <:description>Choose the teammate responsible for this workspace.</:description>
    <:error>Please choose a teammate.</:error>
  </.field>
</.form>

Attributes

Name Type Default Values Global Includes
class :string — — —
invalid :boolean false — —
rest :global — — —

Slots

Slot Slot Attributes
description —
error —
inner_block Required —
label —
message —