Input

New

Overview

HTML input wrapper, for native input types that don't have a dedicated component like checkbox or radio.

The wrapper renders a native HTML input element.

HEEx

<.form for={@form}>
  <Input.input
    field={@form[:email]}
    type="email"
    label="Email"
    placeholder="name@example.com"
    autocomplete="email"
  />
</.form>

Types

Choose from every native input type supported by Input to preview the browser’s corresponding control.

HEEx

<form phx-change="preview-input-type" class="grid w-full gap-6">
  <Select.select
    id="input-type"
    name="input_type"
    label="Input type"
    options={Input.types()}
    value={@input_type}
  />

  <p :if={@input_type == "hidden"} class="text-sm text-muted-foreground">
    Hidden inputs submit data without rendering a visible control.
  </p>
  <Input.input
    :if={@input_type != "hidden"}
    id="input-type-preview"
    name="preview"
    type={@input_type}
    label={@input_example.label}
    placeholder={@input_example.placeholder}
    autocomplete={@input_example.autocomplete}
  />
  <Input.input
    :if={@input_type == "hidden"}
    id="input-type-preview"
    name="preview"
    type="hidden"
    value="example-value"
  />
</form>

Required and constraints

Native attributes such as required, minlength, maxlength, and pattern preserve browser validation before the form reaches LiveView.

HEEx

<form phx-submit="demo-action" class="grid w-full gap-4">
  <Input.input id="username-action" name="action" type="hidden" value="Username saved" />
  <Input.input
    id="username"
    name="username"
    label="Username"
    description="Use 3–20 letters, numbers, or underscores, beginning with a letter."
    autocomplete="username"
    minlength="3"
    maxlength="20"
    pattern="[A-Za-z][A-Za-z0-9_]{2,19}"
    required
  />
  <Button.button type="submit">Save username</Button.button>
</form>

Suggestions with datalist

Associate Input with a native datalist to offer suggestions while still accepting values outside the list.

Deployment region

HEEx

<div class="w-full">
  <Input.input
    id="deployment-region"
    name="deployment_region"
    label="Deployment region"
    list="deployment-regions"
    placeholder="Choose or enter a region"
  />
  <datalist id="deployment-regions">
    <option value="us-east-1">US East (N. Virginia)</option>
    <option value="us-west-2">US West (Oregon)</option>
    <option value="eu-west-1">Europe (Ireland)</option>
  </datalist>
</div>

Description

Pass description to render supporting text and associate it with the input through aria-describedby.

Username (optional)

This is the name other people will see.

HEEx

<.form for={@form}>
  <Input.input
    field={@form[:username]}
    label="Username"
    sublabel="(optional)"
    description="This is the name other people will see."
    autocomplete="username"
  />
</.form>

Disabled

Use the native disabled attribute when a value cannot be edited, focused, or submitted.

Contact support to change this email address.

HEEx

<Input.input
  id="disabled-email"
  name="disabled_email"
  type="email"
  label="Email"
  value="alex@example.com"
  description="Contact support to change this email address."
  disabled
/>

Read-only

Use the native readonly attribute when a value should remain focusable, selectable, and included in form submission.

Workspace ID

Use this ID when configuring integrations.

HEEx

<Input.input
  id="workspace-id"
  name="workspace_id"
  label="Workspace ID"
  value="ws_01JNX8Q4VDH2M6T9K3F7"
  description="Use this ID when configuring integrations."
  readonly
/>

Attached action

Compose Input with Label, Icon, and Core Button when a field has a directly related action. Matching heights and joined borders present the controls as one group while preserving separate input and button semantics.

HEEx

<form class="mx-auto w-full max-w-md">
  <Label.label id="invite-email-label" for="invite-email">Invite by email</Label.label>
  <div class="relative mt-1.5 flex">
    <Icon.icon
      name="hero-envelope"
      class="pointer-events-none absolute left-3 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground"
      aria-hidden="true"
    />
    <Input.input
      id="invite-email"
      name="invite_email"
      type="email"
      aria-labelledby="invite-email-label"
      placeholder="teammate@company.com"
      autocomplete="email"
      class="rounded-r-none pl-10"
    />
    <Button.button
      size={:lg}
      class="-ml-px rounded-l-none"
      phx-click="demo-action"
      phx-value-action="Invitation sent"
    >
      <Icon.icon name="hero-paper-airplane" aria-hidden="true" />
      Invite
    </Button.button>
  </div>
</form>

Password

Set type="password" for native masking, autofill, and password-manager behavior. The colocated .DizzyPassword hook adds the show or hide control with Core.Button and restores masking before submission.

HEEx

<.form for={@form}>
  <Input.input
    field={@form[:password]}
    type="password"
    label="Password"
    description="Use at least 12 characters."
    autocomplete="new-password"
  />
</.form>

Errors

When bound with field, validation errors render beneath the input .

HEEx

<.form for={@form}>
  <Input.input
    field={@form[:email]}
    type="email"
    label="Email"
    placeholder="name@example.com"
  />
</.form>

Add this module

terminal

mix dizzy.add input

Component API

Input.input

Attributes

Attributes for Input.input
Name	Type	Default	Values
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`name`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`sublabel`	`:string`	nil	—
`type`	`:string`	"text"	"color", "date", "datetime-local", "email", "hidden", "month", "number", "password", "range", "search", "tel", "text", "time", "url", "week"
`value`	`:any`	nil	—

JavaScript hook

DizzyPassword

Adds a show and hide button for the password input and switches it between password and text. It announces the visibility change and restores the password type before form submission. Other input types use native browser behavior without a hook.

mix dizzy.add includes the hook and performs any required asset setup automatically.