Noora.TextInput (noora v0.76.0)

Copy Markdown

Renders text input and digit input components with customizable types, labels, placeholders, prefixes, suffixes, and event handling.

Example

<.text_input name="username" label="Username" placeholder="Enter username" />
<.text_input type="email" name="email" label="Email" required={true} show_required={true} />
<.text_input type="password" name="password" label="Password" hint="Must be at least 8 characters" />
<.text_input type="search" name="search" placeholder="Search..." />

<.digit_input id="otp-input" characters={6} otp={true} on_complete="verify_otp" />

Summary

Functions

digit_input(assigns)
text_input(assigns)

Functions

digit_input(assigns)

Attributes

  • id (:string) (required)

  • type (:string) - Defaults to "numeric". Must be one of "alphanumeric", "numeric", or "alphabetic".

  • characters (:integer) (required) - The number of characters in the input.

  • placeholder (:string) - Defaults to nil.

  • otp (:boolean) - Defaults to false.

  • error (:boolean) - Defaults to false.

  • disabled (:boolean) - Defaults to false.

  • on_change (:string) - Event handler for when the input changes. Triggers the event with value { value: string[], valueAsString: string }

    Defaults to nil.

  • on_complete (:string) - Event handler for when the input is complete. Triggers the event with value { value: string[], valueAsString: string }

    Defaults to nil.

  • on_invalid (:string) - Event handler for when the input is invalid. Triggers the event with value { value: string[], valueAsString: string }

    Defaults to nil.

  • Global attributes are accepted.

text_input(assigns)

Attributes

  • id (:string)
  • field (Phoenix.HTML.FormField) - A Phoenix form field.
  • type (:string) - Type of the input. Defaults to "basic". Must be one of "basic", "email", "card_number", "search", or "password".
  • input_type (:string) - HTML input type when type is basic. Defaults to "text".
  • label (:string) - Label to be rendered in the input. Defaults to nil.
  • sublabel (:string) - Sublabel to be rendered in the input. Defaults to nil.
  • hint (:string) - Hint text to be rendered below the input. Defaults to nil.
  • hint_variant (:string) - Hint text variant. Defaults to "default".
  • error (:string) - Errors to be rendered below the input. Takes precedence over hint.
  • show_error_message (:boolean) - Whether to show the error message below the input. Defaults to true.
  • show_prefix (:boolean) - Whether to show the prefix. Defaults to true.
  • show_suffix (:boolean) - Whether to show the suffix. Defaults to true.
  • suffix_hint (:string) - Hint text to show as tooltip at the end of the input. Takes precedence over the suffix set by type. Defaults to nil.
  • name (:string) - The name of the input.
  • value (:string) - The value of the input.
  • placeholder (:string) - Placeholder text to be rendered in the input. Defaults to nil.
  • required (:boolean) - Whether the input is required. Defaults to false.
  • show_required (:boolean) - Whether the required indicator is shown. Defaults to false.
  • min (:any) - Minimum value for number inputs. Defaults to nil.
  • max (:any) - Maximum value for number inputs. Defaults to nil.
  • step (:any) - Step value for number inputs. Defaults to nil.
  • disabled (:boolean) - Whether the input is disabled. Defaults to false.
  • Global attributes are accepted.

Slots

  • prefix - Prefix to be rendered in the input. Only shown when type is basic.
  • suffix - Suffix to be rendered in the input. Takes precedence over suffix_hint.