Password Input

Style

Semantic colors, density, corner radius, and max width via modifier classes on the password input root.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a password input.

Available options: accent, alert, brand, info, success

Default

Accent

Brand

Alert

Info

Success

    <.password_input name="user[password]" class="password-input">
  <:label>Default</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-accent">
  <:label>Accent</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-brand">
  <:label>Brand</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-alert">
  <:label>Alert</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-info">
  <:label>Info</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-success">
  <:label>Success</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

Size

Use class="ui-size-{size}" to set the size of a password input.

Available options: xs, sm, md (default), lg, xl

    <.password_input name="user[password]" class="password-input ui-size-sm">
  <:label>SM</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-size-md">
  <:label>MD</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-size-lg">
  <:label>LG</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-size-xl">
  <:label>XL</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a password input.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

Full

    <.password_input name="user[password]" class="password-input ui-rounded-none">
  <:label>None</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-rounded-sm">
  <:label>SM</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-rounded-md">
  <:label>MD</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-rounded-lg">
  <:label>LG</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-rounded-xl">
  <:label>XL</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>
<.password_input name="user[password]" class="password-input ui-rounded-full">
  <:label>Full</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

Max width

Without max-w-*, width comes from component CSS. Default for password-input: xs (width: 100%).

Use class="max-w-{step}" to set the maximum width of a password input root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs (default), sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

default (xs)

none

full

9xs

8xs

7xs

6xs

5xs

4xs

3xs

2xs

2xl

3xl

4xl

5xl

6xl

7xl

8xl

9xl

    <.password_input name="user[password]" class="password-input w-full">
  <:label>default (xs)</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-none">
  <:label>none</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-full">
  <:label>full</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-9xs">
  <:label>9xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-8xs">
  <:label>8xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-7xs">
  <:label>7xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-6xs">
  <:label>6xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-5xs">
  <:label>5xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-4xs">
  <:label>4xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-3xs">
  <:label>3xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-2xs">
  <:label>2xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-xs">
  <:label>xs</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-sm">
  <:label>sm</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-md">
  <:label>md</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-lg">
  <:label>lg</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-xl">
  <:label>xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-2xl">
  <:label>2xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-3xl">
  <:label>3xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-4xl">
  <:label>4xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-5xl">
  <:label>5xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-6xl">
  <:label>6xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-7xl">
  <:label>7xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-8xl">
  <:label>8xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>

<.password_input name="user[password]" class="password-input w-full max-w-9xl">
  <:label>9xl</:label>
  <:visible_indicator><.heroicon name="hero-eye" class="icon" /></:visible_indicator>
  <:hidden_indicator><.heroicon name="hero-eye-slash" class="icon" /></:hidden_indicator>

</.password_input>