Maui.Input (maui v1.0.0-alpha.9)

Copy Markdown

Form input components including text inputs, checkboxes, radio buttons, switches, and textareas.

Basic Text Input

<.input type="text" name="username" placeholder="Enter username" />

Input with Label

<.input type="email" label="Email" placeholder="you@example.com" />

With Phoenix Form

<.form for={@form} phx-change="validate">
  <.input field={@form[:email]} type="email" label="Email" />
  <.input field={@form[:password]} type="password" label="Password" />
</.form>

Input Types

Supports various HTML input types:

<.input type="text" placeholder="Text input" />
<.input type="email" placeholder="Email input" />
<.input type="password" placeholder="Password" />
<.input type="number" placeholder="Number" />
<.input type="file" />
<.input type="date" />

Checkbox

<.checkbox id="terms" label="I agree to the terms" />

Or with custom label:

<label class="flex items-center gap-2">
  <.checkbox id="terms" />
  <span>Accept terms</span>
</label>

Radio Button

<label class="flex items-center gap-2">
  <.radio name="plan" value="basic" />
  <span>Basic Plan</span>
</label>

Switch/Toggle

<.switch id="notifications" label="Enable notifications" />

Textarea

<.textarea label="Description" placeholder="Enter description..." />

Disabled State

<.input type="text" disabled placeholder="Disabled input" />
<.checkbox id="terms" disabled label="Disabled checkbox" />

Attributes (input/1)

AttributeTypeDefaultDescription
typestring"text"Input type (text, email, password, etc.)
labelstringnilLabel text (creates wrapped label + input)
fieldFormFieldnilPhoenix form field struct
classstring""Additional CSS classes
idanynilInput ID

Global Attributes

All standard HTML input attributes are supported: accept, autocomplete, disabled, max, min, pattern, placeholder, readonly, required, etc.

Summary

Functions

checkbox(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • label (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "checked", "name", "value"].

Slots

  • inner_block

generate_id(prefix \\ "input")

input(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • class (:string) - Defaults to "".
  • type (:string) - Defaults to "text".
  • label (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "name", "value"].

label(assigns)

Attributes

  • class (:string) - Defaults to "".
  • Global attributes are accepted. Supports all globals plus: ["for"].

Slots

  • inner_block

map_field(assigns)

radio(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • class (:string) - Defaults to "".
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["checked", "name", "value"].

switch(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • class (:string) - Defaults to "".
  • label (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["accept", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "name", "value"].

textarea(assigns)

Attributes

  • id (:any) - Defaults to nil.
  • class (:string) - Defaults to "".
  • label (:string) - Defaults to nil.
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email]. Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["accept", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step", "name", "value"].