Text Input

NB! The component will be deprecated soon.

Please check out our new TextInput component.

Sizes

Text Input Icons

Icons

Text Input Types

Number

Date

Time

Date Time

Email

Password

Search

Text input attributes

Disabled

Error

Readonly

Size RTL

Without label

Hint Text

Input with background color

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">,
  id: nil,
  username: "johndoe",
  password: "verysecret123",
  name: "First Last",
  email: "[email protected]",
  phone: nil,
  country: nil,
  gender: "male",
  document_filename: nil,
  agrees_to_terms_of_service: true,
  agrees_to_marketing_emails: true,
  permissions: nil,
  role: nil
}
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