uxio/ui | Open-source UI library based on shadcn

Password field built on Input Group with the same props as Input, plus a suffix button to show or hide the typed value.

Overview

InputPassword composes Input Group with the registry Input control and a trailing icon button. The field defaults to type="password" and toggles to type="text" when the user shows the value.

All props match the underlying Input except type, which is managed internally.
autoComplete defaults to current-password; pass another value for new-password fields or one-time codes.
The toggle is a button with aria-pressed and an accessible label for screen readers.

Custom props

Prop	Type	Description
`size`	`'xs' \| 'sm' \| 'default' \| 'lg'`	Optional. Passed to the root `InputGroup`: shell height matches other inputs; the field and toggle scale with the group. All other props match Input. `type` is managed internally.

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/input-password

This pulls input-group as a registry dependency. The correct variant (Base UI or Radix) follows your components.json style.

Usage

import * as React from "react"

import { InputPassword } from "@/components/ui/input-password"

export function SignInPassword() {
  const [password, setPassword] = React.useState("")

  return (
    <InputPassword
      id="password"
      name="password"
      value={password}
      placeholder="Password"
      onChange={(event) => setPassword(event.target.value)}
    />
  )
}

Examples

Default

Length: 0

Size variants

Use size so the field aligns with InputGroup and Input dimensions.

default

Input Password