View Source SaladUI.Input (SaladUI v1.0.0-beta.2)

Implementation of an input component for various form input types.

Examples: 

<.input type="text" placeholder="Enter your name" />
<.input type="email" placeholder="Enter your email" />
<.input type="password" placeholder="Enter your password" />
<.input field={f[:email]} type="email" placeholder="Enter your email" />

Summary

Functions

input(assigns)

Renders a form input field or a component that looks like an input field.

Functions

Link to this function

input(assigns)

View Source

Renders a form input field or a component that looks like an input field.

Options

  • :id - The id to use for the input
  • :name - The name to use for the input
  • :value - The value to pre-populate the input with
  • :type - The type of input (text, email, password, etc.)
  • :default-value - The default value of the input
  • :field - A form field struct to build the input from
  • :class - Additional CSS classes to apply
  • :placeholder - Placeholder text (passed through as rest)
  • :disabled - Whether the input is disabled (passed through as rest)
  • :required - Whether the input is required (passed through as rest)
  • :readonly - Whether the input is readonly (passed through as rest)
  • :autocomplete - Hints for form autofill feature (passed through as rest)

Attributes

  • id (:any) - Defaults to nil.
  • name (:any) - Defaults to nil.
  • value (:any)
  • type (:string) - Defaults to "text".
  • default-value (:any)
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
  • class (:any) - 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"].