Text field

The Mishka Chelekom text field is a Phoenix LiveView component for single-line text such as names, titles and short addresses. It renders an <input type="text"> with an optional label, a description, error messages, a floating label and two slots for icons or other content.

Use it when no other field type fits. For email addresses, phone numbers, URLs, numbers and passwords, the dedicated fields set the matching input type and mobile keyboard. The field shares its color, variant, size and spacing props with them.

<.text_field
  name="full_name"
  label="Full name"
  placeholder="Jane Doe"
  description="Shown on your public profile."
/>
<.text_field
  name="full_name"
  label="Full name"
  floating="outer"
  description="Shown on your public profile."
  size="large"
/>

The variant prop sets the look of the field. The values are base (the default), outline, default, shadow, bordered and transparent. The base variant is a white field with a light border and ignores color. outline draws the border and the text in the chosen color, and default fills the field with it. shadow fills the field and adds a colored shadow. bordered uses a light tint of the color with a border, and transparent has neither fill nor border. Every variant has its own dark mode colors.

<.text_field variant="base" color="primary" />
<.text_field variant="outline" color="primary" />
<.text_field variant="default" color="primary" />
<.text_field variant="shadow" color="primary" />
<.text_field variant="bordered" color="primary" />
<.text_field variant="transparent" color="primary" />

The color prop picks the color of the border, the fill or the text, depending on the variant, and the color of the focus ring. The values are natural (the default), primary, secondary, success, warning, danger, info, misc, dawn, silver, white and dark. The white and dark colors exist for the default and bordered variants.

<.text_field variant="default" color="natural" />
<.text_field variant="default" color="primary" />
<.text_field variant="default" color="success" />
<.text_field variant="default" color="warning" />
<.text_field variant="default" color="danger" />
<.text_field variant="default" color="dark" />

The size prop sets the height of the input. extra_small is 2rem high and extra_large, the default, is 3rem high. small, medium and large sit in between.

<.text_field size="extra_small" />
<.text_field size="small" />
<.text_field size="medium" />
<.text_field size="large" />
<.text_field size="extra_large" />

The rounded prop sets the corner radius of the field. The values are none, extra_small, small (the default), medium, large, extra_large and full.

<.text_field rounded="none" />
<.text_field rounded="extra_small" />
<.text_field rounded="small" />
<.text_field rounded="medium" />
<.text_field rounded="large" />
<.text_field rounded="extra_large" />
<.text_field rounded="full" />

The border prop sets the border width. The values are none, extra_small (1px, the default), small (2px), medium (3px), large (4px) and extra_large (5px). The default, shadow and transparent variants have no border, so the prop changes the base, outline and bordered variants.

<.text_field border="none" />
<.text_field border="extra_small" />
<.text_field border="small" />
<.text_field border="medium" />
<.text_field border="large" />
<.text_field border="extra_large" />

The space prop sets the vertical space between the label, the description, the input and the error messages. The values are none, extra_small, small, medium (the default), large and extra_large.

<.text_field space="extra_small" />
<.text_field space="small" />
<.text_field space="medium" />
<.text_field space="large" />
<.text_field space="extra_large" />

The label prop adds a label above the input, and description adds a short help text under the label. Give the component an id, or pass a field, so the label is linked to the input. The description text is 12px by default, and description_class changes that.

<.text_field
  id="full_name"
  name="full_name"
  label="Full name"
  description="Shown on your public profile."
/>

The floating prop moves the label into the field. The values are none (the default), inner and outer. The label starts inside the field in place of the placeholder and moves up when the field gets focus or a value. With outer it settles on the top edge of the field, and with inner it stays inside the field above the text. A floating field does not show the placeholder prop, and its description sits above the field.

<.text_field floating="inner" variant="default" color="primary" />
<.text_field floating="outer" variant="outline" color="primary" />

The start_section and end_section slots put content before and after the input, inside the border of the field. An icon is the usual choice, and the icon component draws Heroicons by name. Both slots take a class attribute for their wrapper.

<.text_field name="full_name" label="Full name" placeholder="Jane Doe">
  <:start_section>
    <.icon name="hero-user" class="size-4" />
  </:start_section>
</.text_field>
<.text_field name="full_name" label="Full name" placeholder="Jane Doe">
  <:end_section>
    <.icon name="hero-user" class="size-4" />
  </:end_section>
</.text_field>

Use maxlength to stop the user at a number of characters and minlength to ask for a minimum. The browser checks the minimum when the form is submitted. spellcheck="false" turns off the red underline for values such as usernames, and autocomplete="name" lets the browser fill in a saved name.

<.text_field name="username" label="Username" maxlength="20" spellcheck="false" />
<.text_field name="full_name" label="Full name" minlength="3" autocomplete="name" />

The ring prop is a boolean and true by default. It draws a thin ring around the field while the input has focus. Set ring={false} to remove it.

<.text_field ring={true} />
<.text_field ring={false} />

Other attributes go straight to the input. The text field passes autocomplete, autofocus, disabled, form, inputmode, list, maxlength, minlength, pattern, readonly, required, spellcheck and title, along with aria-* attributes and the global HTML attributes Phoenix allows.

<.text_field name="full_name" label="Required" required />
<.text_field name="full_name" label="Disabled" value="Jane Doe" disabled />
<.text_field name="full_name" label="Read only" value="Jane Doe" readonly />

Besides class, which styles the outer element, each part of the field has a prop that takes classes: input_class for the input, label_class for the label, description_class for the description, description_wrapper_class for the box that holds the label and the description, field_wrapper_class for the bordered box around the input and its sections, and floating_label_class for a floating label.

<.text_field label="Full name with custom classes" label_class="text-rose-400" input_class="font-bold" />

Pass a form field with field={@form[:full_name]} and the component reads its id, name and value from it. The error messages of the field show under the input once the user has used it, and they go through the errors domain of your app's Gettext backend. Without a form, set name and value yourself and pass errors a list of messages. The error_icon prop names a Heroicon that is shown beside each message.

<.text_field field={@form[:full_name]} label="Full name" error_icon="hero-exclamation-circle" />

<.text_field name="full_name" value="" errors={["Enter your full name"]} />