Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Password Actions Input Group for Vue

A password field with a show or hide button, and a generate button that does not fill a password.

UI library: Ark UI

An eye button at the end switches the field between masked and visible. Its name flips between Show password and Hide password. A refresh button sits beside it and does nothing until you write a password into the field.

Use it on a sign-up where people both reveal and generate a password. Showing and hiding alone is Password Input. In Vue, Ark UI does not invent a password for the refresh button.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup class="w-full max-w-sm bg-background">
  <InputGroupInput
    aria-label="Password"
    placeholder="Enter password"
    :type='visible ? "text" : "password"'
  />
  <InputGroupAddon align="inline-end">
    <InputGroupButton
      :aria-label='visible ? "Hide password" : "Show password"'
      @click="handleVisibilityToggle"
      size="icon-xs"
      variant="ghost"
    >
      <EyeOffIcon v-if="visible" aria-hidden="true" />
      <EyeIcon v-else aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">
    <InputGroupButton aria-label="Generate password" size="icon-xs" variant="ghost">
      <RefreshCwIcon aria-hidden="true" />
    </InputGroupButton>
  </InputGroupAddon>
</InputGroup>

FAQ

How does the eye button show the password?

A visible flag sets the input's type to text or password, and the icon to an open or crossed-out eye.

What does the toggle say to screen readers?

Its aria-label follows the flag: Show password while hidden, Hide password while shown.

What does the generate button do?

Nothing in the demo. Generate a password in its handler and write it into the field, which then needs to be a controlled input.

In what order do the buttons appear?

In source order: the show/hide addon, then the generate addon, both with align="inline-end" after the input.

Does pressing the eye button move focus?

No. The addon ignores clicks on its buttons, so focus stays on the button and people can toggle again.

Which autocomplete value should the input have?

Add autoComplete="new-password" on a sign-up or change form so password managers offer to save the generated password, or current-password on a sign-in form.

API Reference

Input Group

Sets aria-label="Password", placeholder="Enter password", type="visible ? text : password", align="inline-end", aria-label="visible ? Hide password : Show password" and click="handleVisibilityToggle". The rest is on the Input Group page.

All 39 input group examples