Input

New

Overview

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

HEEx

<form id="example-input-form" class="example-fields grid w-full gap-4">
  <Input.input
    id="example-email"
    name="email"
    type="email"
    label="Email"
    placeholder="name@example.com"
    autocomplete="email"
  />
  <Input.input
    id="example-password"
    name="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
  :let={form}
  for={to_form(%{"email" => ""}, errors: [email: {"can't be blank", []}])}
  id="example-input-errors-form"
  class="example-fields w-full"
>
  <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	—
`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 the show and hide button for password inputs. It switches the native input between password and text, announces the visibility change, and restores the password type before form submission. Other input types use native browser behavior without a hook.

Included in the packaged Dizzy hooks. mix dizzy.add wires this hook into your LiveSocket configuration automatically.