Input

PUI's input component covers single-line form fields such as text, email, password, number, date, and file inputs. Use it when you need a standard input with PUI styling, labels, and LiveView-friendly attributes.

Import

use PUI
# or
import PUI.Input

Basic Usage

The basic input component renders a styled single-line field with an optional label.

<.input id="name" name="name" label="Full Name" placeholder="Enter your name" />

Common Input Types

The type attribute accepts any standard HTML input type:

<.input type="text" label="Text" name="text" />
<.input type="email" label="Email" name="email" placeholder="you@example.com" />
<.input type="password" label="Password" name="password" />
<.input type="number" label="Quantity" name="qty" min="0" max="100" />
<.input type="url" label="Website" name="url" placeholder="https://" />
<.input type="tel" label="Phone" name="phone" />
<.input type="date" label="Date" name="date" />

Labels and Placeholders

Pass label when you want PUI to render the label wrapper for you. You can also provide placeholder text and any other standard input attributes.

<.input
  id="company"
  name="company"
  label="Company"
  placeholder="Acme Inc."
/>

Form Integration

Inputs work seamlessly with Phoenix form fields via the field attribute:

<.form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:name]} label="Name" />
  <.input field={@form[:email]} type="email" label="Email" />
  <.button type="submit">Save</.button>
</.form>

When using form fields, error messages are automatically displayed when the field has been interacted with.

Manual Errors

You can also render errors without a form field by passing errors directly:

<.input
  id="company"
  name="company"
  label="Company"
  errors={["Please enter a company name."]}
/>

Related Form Controls

• Textarea
• Checkbox
• Radio
• Switch
• Select

API Reference

Input Attributes