Text Input

Sizes

Text Input Icons

Icons

Text Input Types

Number

Date

Time

Date Time

Email

Password

Text input attributes

Disabled

Error

Readonly

Size RTL

Without label

Hint Text

Form example

State
@user_changeset = #Ecto.Changeset<action: nil, changes: %{}, errors: [],
 data: #MoonWeb.Pages.Tutorials.AddDataUsingForm.User<>, valid?: true>
@user = %MoonWeb.Pages.Tutorials.AddDataUsingForm.User{
  __meta__: #Ecto.Schema.Metadata<:built, "users">,
  agrees_to_marketing_emails: true,
  agrees_to_terms_of_service: true,
  country: nil,
  document_filename: nil,
  email: "[email protected]",
  gender: "male",
  id: nil,
  name: "First Last",
  password: "verysecret123",
  permissions: [1, 2],
  phone: nil,
  role: 1,
  username: "johndoe"
}
Text Input Props
Name Type Required Default Description
type date | datetime-local | email | number | password | search | tel | text | url | time | url false text Different types of input
size medium | large | xlarge - medium Size variant (currently only medium | large, with large as default)
label string true - Required for medium size only
placeholder string false - Placeholder for input
field atom true - Field value for underlying pheonix text input component
hint_text slot false - Informative or error message under input
error boolean false - Set error state for input
show_password_text - - - Only for input type password. Text for toggle button: show/hide password
background_color string false - Background color
id string false | required (for password type) - Unique id
use_error_tag boolean false false Whether to use ErrorTag in place of the Hint text to show error messages. Requires the component to be inside Form and Field components