GroupCollect 1.3.142

Text

Renders an input with label and error messages.

Read more Read less

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.

Types

This function accepts all HTML input types, considering that:

  • You may also set type="select" to render a <select> tag
  • For live file uploads, see Phoenix.Component.live_file_input/1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information. Unsupported types, such as hidden and radio, are best written directly in your templates.

Examples

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

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

# The label can be also passed as a custom_label slot (for checkbox, radio, and toggle only)
<.input type="checkbox" name="terms">
  <:custom_label>Accept <.a href="#">terms and conditions</.a></:custom_label>
</.input>

# Password input with help text
<.input type="password" name="password" label="Password">
  <:help>Password must be at least 8 characters long</:help>
</.input>

Accessibility Features

Password Input

  • aria-describedby - Links input with toggle button
  • aria-label - Provides context for the toggle button
  • aria-pressed - Indicates toggle state
  • aria-controls - Associates toggle with input field

Security Features

Password Input

  • Auto-hide password after 5 seconds when revealed
  • autocomplete="current-password" for secure browser password management
A text input Open in playground

Helper text

Helper text with icon

Error helper text

Disabled help text

Readonly help text 

<.stack class="gc-full-width" space="lg">
  <.input
    id="text-text-plain"
    label="Label"
    name="text"
    type="text"
    value="Standard with text"
  />
  <.input
    id="text-text-overflow"
    label="Label"
    name="overflow"
    type="text"
    value="Standard with text that is long enough to cause an overflow with a scroll bar inside the textarea field. Overflow is handled with a scroll bar when there are lots of words in this type of input. textarea is intended for longer and more complex data, compared to text, which is intended for one line of input.
                  "
  />
  <.input
    id="text-text-placeholder"
    label="Label"
    name="placeholder"
    type="text"
    value=""
    placeholder="Placeholder text"
  />
  <.input
    id="text-text-required"
    label="Label"
    name="required"
    type="text"
    value="This text is required"
    required
  />
  <.input id="text-text-helper-text" label="Label" name="helper_text" type="text" value="">
    <:help>Helper text</:help>
  </.input>
  <.input
    id="text-text-helper-text-with-icon"
    label="Label"
    name="helper_text_with_icon"
    type="text"
    value=""
  >
    <:help icon="book">Helper text with icon</:help>
  </.input>
  <.input
    id="text-text-error"
    label="Label"
    name="error"
    type="text"
    value="Some input text"
    errors={["Error helper text"]}
  />
  <.input
    disabled
    id="text-text-disabled"
    label="Disabled"
    name="disabled"
    type="text"
    value="Disabled text"
  >
    <:help icon="book">Disabled help text</:help>
  </.input>
  <.input
    id="text-text-readonly"
    label="Readonly"
    name="readonly"
    type="text"
    value="Readonly text"
    readonly
  >
    <:help icon="book">Readonly help text</:help>
  </.input>
  <.input
    id="text-text-with-different-mobile-label"
    label="Desktop label"
    name="with_different_mobile_label"
    type="text"
    value=""
    mobile_label="Mobile label"
  />
  <.input id="text-text-icon" label="With icon" name="Label" value="" icon="book"/>
</.stack>