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

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput label="Medium (Default: md)" />
<TextInput size="lg" label="Large (lg)" />
<TextInput size="xl" label="Xlarge (xl)" />

Text Input Icons

Icons

Medium (Default: md)

Show

Large (lg)

Show

Xlarge (xl)

Show

Medium (Default: md)

Large (lg)

Xlarge (xl)

Medium (Default: md)

Informative message holder

Large (lg)

Informative message holder

Xlarge (xl)

Informative message holder

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TopToDown class="w-full">
  <LeftToRight class="justify-between w-full items-end">
    <TextInput
      label="Medium (Default: md)"
      placeholder="Placeholder"
      type="password"
      id="txt_password_0_1"
    >
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
    <TextInput
      size="lg"
      label="Large (lg)"
      placeholder="Placeholder"
      type="password"
      id="txt_password_0_2"
    >
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
    <TextInput
      size="xl"
      label="Xlarge (xl)"
      placeholder="Placeholder"
      type="password"
      id="txt_password_0_3"
    >
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
  </LeftToRight>

  <LeftToRight class="justify-between w-full items-end">
    <TextInput label="Medium (Default: md)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
    </TextInput>
  </LeftToRight>

  <LeftToRight class="justify-between w-full items-end">
    <TextInput label="Medium (Default: md)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="lg" label="Large (lg)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
    <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder">
      <:left_icon_slot><Icon name="controls-collapse" /></:left_icon_slot>
      <:right_icon_slot><Icon name="controls-clear" /></:right_icon_slot>
      <:hint_text_slot>Informative message holder</:hint_text_slot>
    </TextInput>
  </LeftToRight>
</TopToDown>

Text Input Types

Number

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="number"
  size="md"
  label="Medium (Default: md)"
  placeholder="e.g. 1234"
/>
<TextInput
  type="number"
  size="lg"
  label="Large (lg)"
  placeholder="e.g. 1234"
/>
<TextInput
  type="number"
  size="xl"
  label="Xlarge (xl)"
  placeholder="e.g. 1234"
/>

Date

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="date"
  size="md"
  label="Medium (Default: md)"
  placeholder="Placeholder"
/>
<TextInput
  type="date"
  size="lg"
  label="Large (lg)"
  placeholder="Placeholder"
/>
<TextInput
  type="date"
  size="xl"
  label="Xlarge (xl)"
  placeholder="Placeholder"
/>

Time

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="time"
  size="md"
  label="Medium (Default: md)"
  placeholder="Placeholder"
/>
<TextInput
  type="time"
  size="lg"
  label="Large (lg)"
  placeholder="Placeholder"
/>
<TextInput
  type="time"
  size="xl"
  label="Xlarge (xl)"
  placeholder="Placeholder"
/>

Date Time

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="datetime-local"
  size="md"
  label="Medium (Default: md)"
  placeholder="Placeholder"
/>
<TextInput
  type="datetime-local"
  size="lg"
  label="Large (lg)"
  placeholder="Placeholder"
/>
<TextInput
  type="datetime-local"
  size="xl"
  label="Xlarge (xl)"
  placeholder="Placeholder"
/>

Email

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="email"
  size="md"
  label="Medium (Default: md)"
  placeholder="e.g. [email protected]"
/>
<TextInput
  type="email"
  size="lg"
  label="Large (lg)"
  placeholder="e.g. [email protected]"
/>
<TextInput
  type="email"
  size="xl"
  label="Xlarge (xl)"
  placeholder="e.g. [email protected]"
/>

Password

Medium (Default: md)

Show

Large (lg)

Show

Xlarge (xl)

Show

<TextInput
  id="txt_password_1"
  type="password"
  size="md"
  label="Medium (Default: md)"
  placeholder="Password"
/>
<TextInput
  id="txt_password_2"
  type="password"
  size="lg"
  label="Large (lg)"
  placeholder="Password"
/>
<TextInput
  id="txt_password_3"
  type="password"
  size="xl"
  label="Xlarge (xl)"
  placeholder="Password"
/>

Search

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput
  type="search"
  size="md"
  label="Medium (Default: md)"
  placeholder="e.g. happiness"
/>
<TextInput
  type="search"
  size="lg"
  label="Large (lg)"
  placeholder="e.g. health"
/>
<TextInput
  type="search"
  size="xl"
  label="Xlarge (xl)"
  placeholder="e.g. money"
/>

Text input attributes

Disabled

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput label="Medium (Default: md)" placeholder="Placeholder" disabled/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" disabled/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" disabled/>

Error

Medium (Default: md)

Informative message holder

Large (lg)

Informative message holder

Xlarge (xl)

Informative message holder

<TextInput label="Medium (Default: md)" placeholder="Placeholder" is_error>
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" is_error>
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
  <TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" is_error>
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>

Readonly

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput label="Medium (Default: md)" placeholder="Placeholder" readonly/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" readonly/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" readonly/>

Size RTL

Medium (Default: md)

Large (lg)

Xlarge (xl)

<TextInput label="Medium (Default: md)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="lg" label="Large (lg)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="xl" label="Xlarge (xl)" placeholder="Placeholder" dir="rtl"/>

Without label

<TextInput (Default: md)" placeholder="Placeholder" dir="rtl"/>
<TextInput size="lg" placeholder="Placeholder" dir="rtl"/>
<TextInput size="xl" placeholder="Placeholder" dir="rtl"/>

Hint Text

Medium (Default: md)

Informative message holder

Large (lg)

Informative message holder

XLarge (xl)

Informative message holder

<TextInput placeholder="Placeholder" label="Medium (Default: md)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>

Input with background color

Medium (Default: md)

Informative message holder

Large (lg)

Informative message holder

XLarge (xl)

Informative message holder

<TextInput placeholder="Placeholder" label="Medium (Default: md)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="lg" placeholder="Placeholder" label="Large (lg)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>
<TextInput size="xl" placeholder="Placeholder" label="XLarge (xl)">
  <:hint_text_slot>Informative message holder</:hint_text_slot>
</TextInput>

Form example

Username

Password

Show

<Form
  for={@user_changeset}
  change="register_form_update"
  submit="register_form_submit"
  autocomplete="off"
>
  <TopToDown>
    <Field name={:username}>
      <TextInput label="Username" placeholder="Username" />
      <ErrorTag />
    </Field>
    <Field name={:email}>
      <TextInput
        label="Email"
        placeholder="Email"
        type="email"
        disabled={!get_has_valid_username(@user_changeset)}
      />
      <ErrorTag />
    </Field>
    <Field name={:password}>
      <TextInput id="password" label="Password" placeholder="Password" type="password" use_error_tag/>
    </Field>
    <div class="pt-4">
      <Button type="submit" right_icon="arrows_right" variant="primary">Register</Button>
    </div>
  </TopToDown>
</Form>

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

Components v2

Button

Form

Components v1

Charts

Datepicker

Dialog

Progress

Select

Text Input

Sizes

Icons

Number

Date

Time

Date Time

Email

Password

Search

Disabled

Error

Readonly

Size RTL

Without label

Hint Text

Input with background color

Form example