Text Input

Indeed, forms require input from all users, including astronauts. Text input fields help to gather both short and long-form information. The size of the text field should correspond to the length of information that's required.

Text input fields can contain various rules to ensure the right information is obtained from users. Users should also be given prompts to guide them on what's needed, or if they've made an error while doing so.

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: nil,
  phone: nil,
  role: nil,
  username: "johndoe"
}
Text Input Props
Name Type Required Default Description
type date | datetime-local | email | number | password | search | tel | text | url | time | url No text Different types of input
size medium | large | xlarge - medium Size variant (currently only medium | large, with large as default)
label string Yes - Required for medium size only
placeholder string No - Placeholder for input
field atom Yes - Field value for underlying pheonix text input component
hint_text slot No - Informative or error message under input
error boolean No - Set error state for input
show_password_text - - - Only for input type password. Text for toggle button: show/hide password
background_color string No - Background color
id string No | required (for password type) - Unique id
use_error_tag boolean No 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