Password field

The Mishka Chelekom password field is a Phoenix LiveView component for passwords. It renders an <input type="password">, which hides what the user types. Around the input it adds an optional label, a description, error messages, a floating label, two slots, and a show_password prop that adds a button to reveal the text.

When you do not pass an id, the field generates one, because the show password button needs it to find the input. The field shares its color, variant, size and spacing props with the other form fields.

<.password_field
  name="password"
  label="Password"
  placeholder="At least 8 characters"
  description="Use letters and numbers."
/>
<.password_field
  name="password"
  label="Password"
  floating="outer"
  description="Use letters and numbers."
  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.

<.password_field variant="base" color="primary" />
<.password_field variant="outline" color="primary" />
<.password_field variant="default" color="primary" />
<.password_field variant="shadow" color="primary" />
<.password_field variant="bordered" color="primary" />
<.password_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.

<.password_field variant="default" color="natural" />
<.password_field variant="default" color="primary" />
<.password_field variant="default" color="success" />
<.password_field variant="default" color="warning" />
<.password_field variant="default" color="danger" />
<.password_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.

<.password_field size="extra_small" />
<.password_field size="small" />
<.password_field size="medium" />
<.password_field size="large" />
<.password_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.

<.password_field rounded="none" />
<.password_field rounded="extra_small" />
<.password_field rounded="small" />
<.password_field rounded="medium" />
<.password_field rounded="large" />
<.password_field rounded="extra_large" />
<.password_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.

<.password_field border="none" />
<.password_field border="extra_small" />
<.password_field border="small" />
<.password_field border="medium" />
<.password_field border="large" />
<.password_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.

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

The label prop adds a label above the input, and description adds a short help text under the label. The label is linked to the input through an id that the component generates, unless you pass your own. The description text is 12px by default, and description_class changes that.

<.password_field
  id="password"
  name="password"
  label="Password"
  description="Use letters and numbers."
/>

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.

<.password_field floating="inner" variant="default" color="primary" />
<.password_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.

<.password_field
  name="password"
  label="Password"
  placeholder="At least 8 characters"
>
  <:start_section>
    <.icon name="hero-lock-closed" class="size-4" />
  </:start_section>
</.password_field>
<.password_field
  name="password"
  label="Password"
  placeholder="At least 8 characters"
>
  <:end_section>
    <.icon name="hero-lock-closed" class="size-4" />
  </:end_section>
</.password_field>

The show_password prop is a boolean and false by default. When it is set, a button with an eye icon appears at the end of the field, after the end section. A click switches the input between password and text with Phoenix.LiveView.JS, so the toggle needs no round trip to the server. The button is labeled "Show password" for screen readers, translated through Gettext, and reports its state with aria-pressed.

<.password_field name="password" label="Password" show_password />

Set autocomplete="current-password" on a sign in form and autocomplete="new-password" on a sign up or reset form. Password managers use the value to fill in a saved password or to offer a new one. minlength asks for a minimum length, which the browser checks when the form is submitted.

<.password_field name="password" label="Current password" autocomplete="current-password" />
<.password_field name="new_password" label="New password" autocomplete="new-password" minlength="8" />

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.

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

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

<.password_field name="password" label="Required" required />
<.password_field name="password" label="Disabled" value="secret" disabled />
<.password_field name="password" label="Read only" value="secret" 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, floating_label_class for a floating label, and show_pass_class for the wrapper of the show password button.

<.password_field label="Password with custom classes" label_class="text-rose-400" input_class="font-bold" />

Pass a form field with field={@form[:password]} 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.

<.password_field field={@form[:password]} label="Password" error_icon="hero-exclamation-circle" />

<.password_field name="password" value="" errors={["The password is too short"]} />