SutraUI.Input (Sutra UI v0.2.0)

View Source

Renders form input elements with label and error handling.

A drop-in replacement for Phoenix's generated input component, providing full parity with Phoenix generators while using Sutra UI styling.

Examples

# Basic text input
<.input type="text" name="username" placeholder="Username" />

# With form field (auto-extracts id, name, value, errors)
<.input field={@form[:email]} type="email" label="Email" />

# Password input with label
<.input type="password" name="password" label="Password" required />

# Select with options
<.input
  type="select"
  name="country"
  label="Country"
  prompt="Select a country"
  options={[{"United States", "us"}, {"Canada", "ca"}]}
/>

# Checkbox
<.input type="checkbox" name="terms" label="I agree to the terms" />

# Switch (toggle)
<.input type="switch" name="notifications" label="Enable notifications" />

# Textarea
<.input type="textarea" name="bio" label="Bio" rows={4} />

# Range slider
<.input type="range" name="volume" label="Volume" min={0} max={100} />

Types

This component accepts all HTML input types, with special handling for:

  • type="checkbox" - Delegates to SutraUI.Checkbox with hidden false value
  • type="switch" - Delegates to SutraUI.Switch (toggle with role="switch")
  • type="select" - Renders a native <select> element
  • type="textarea" - Delegates to SutraUI.Textarea
  • type="range" - Delegates to SutraUI.Slider with colocated hook
  • type="hidden" - Renders just the input, no wrapper or label

For live file uploads, see Phoenix.Component.live_file_input/1.

Select Types

This component provides two ways to render select inputs:

Native Select (via <.input type="select">)

For standard form selects that work with Phoenix generators:

<.input
  field={@form[:country]}
  type="select"
  label="Country"
  prompt="Select a country"
  options={[{"United States", "us"}, {"Canada", "ca"}]}
/>

Custom Select (via SutraUI.Select)

For advanced features like search/filter, keyboard navigation, and custom styling, use the dedicated SutraUI.Select component directly:

<.select id="country" name="country" value={@country} searchable>
  <.select_option value="us" label="United States" />
  <.select_option value="ca" label="Canada" />
</.select>

See SutraUI.Select for more details.

Accessibility

  • Labels are properly associated with inputs via wrapping
  • aria-invalid is automatically set when errors are present
  • Error messages are displayed below inputs
  • Switch inputs include role="switch" and aria-checked
  • Range inputs include aria-valuemin, aria-valuemax, aria-valuenow
  • Supports standard ARIA attributes via :rest

Summary

Functions

input(assigns)

Renders an input with label and error messages.

translate_error(arg)

Translates an error message using gettext.

translate_errors(errors, field)

Translates the errors for a field from a keyword list of errors.

Functions

input(assigns)

Renders an input with label and error messages.

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />

Attributes

  • id (:any) - The id attribute for the input. Defaults to nil.
  • name (:any) - The name attribute for the input. Defaults to nil.
  • label (:string) - Label text - renders label before input. Defaults to nil.
  • value (:any) - The value of the input. Defaults to nil.
  • type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "select", "switch", "tel", "text", "textarea", "time", "url", or "week".
  • field (Phoenix.HTML.FormField) - A form field struct retrieved from the form, for example: @form[:email].
  • errors (:list) - List of error messages to display. Defaults to [].
  • checked (:boolean) - The checked flag for checkbox inputs.
  • prompt (:string) - The prompt for select inputs. Defaults to nil.
  • options (:list) - The options to pass to Phoenix.HTML.Form.options_for_select/2.
  • multiple (:boolean) - The multiple flag for select inputs. Defaults to false.
  • class (:any) - Additional CSS classes. 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", "phx-debounce", "phx-mounted", "aria-label", "aria-describedby", "aria-invalid", "aria-required"].

translate_error(arg)

Translates an error message using gettext.

translate_errors(errors, field)

Translates the errors for a field from a keyword list of errors.