/ux
Components/Inputs/PasswordInput

PasswordInput

Inputs

Text input with toggleable visibility for sensitive values.

Renders a password input with an eye icon button that toggles visibility. Shares the same variant, size, label, description, and error system as TextInput.

Usage

import { PasswordInput } from "nosible-ux"

export default function Example() {
  return <PasswordInput label="API secret" placeholder="Paste your secret key" />
}

Examples

Variants

Error state

Accessibility

Toggle button aria-label updates between "Show password" and "Hide password" on state change. Focus remains on the input when toggling.

Props

Name TypeDefaultDescription
description
string | undefined—Helper text below the input. Suppressed when `error` is present.
error
string | undefined—Validation error. Sets `aria-invalid` and renders Critical Red text.
label
string | undefined—Label rendered ALL-CAPS in Space Mono above the input.
size
"sm" | "md" | "lg" | undefined"md"Visual size of the control.
variant
"default" | "filled" | "outline" | undefined"default"Visual variant.
← All ComponentsGetting Started →