Skip to content

Documentation

PasswordField

PasswordField is a compound component built on TextField.

Storybook Source Figma

Root Props

Prop	Type	Default
`disabled`	`boolean`	—
Disables the password field. Prevents user input and interaction and applies the disabled visual state.
`shown`	`boolean`	—
Controls whether the password is shown as plain text. When set, the component becomes controlled.
`defaultShown`	`boolean`	`false`
Initial visibility for uncontrolled usage.
`onChangeShown`	`(shown: boolean) => void`	—
Called when the visibility is toggled.
`size`	`TextFieldSize`	—
Visual size of the text field. Affects padding, font size, and overall height. 'sm': Compact input; 'md': Default; 'lg': Spacious layout
`error`	`boolean`	—
Shows the input in an error state.
`ref`	`Ref<HTMLDivElement>`	—
Ref forwarded to wrapper element Useful for programmatic control, focus, or integration.

Also accepts all <div> attributes.

Child Parts

PasswordFieldInput: context-aware password/text input.
PasswordFieldToggleIconButton: button that toggles shown state.
PasswordFieldShownIcon: icon for shown state.
PasswordFieldHiddenIcon: icon for hidden state.

`PasswordFieldInput`

Prop	Type	Default
`ref`	`Ref<HTMLInputElement>`	—
Ref forwarded to the underlying native `<input>` element.

Also accepts all <input> attributes.

`PasswordFieldHiddenIcon`

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

`PasswordFieldShownIcon`

Prop	Type	Default
`size`	`IconSize`	—
Predefined size token for the icon. Can be overridden by explicit width and height.
`ref`	`Ref<SVGSVGElement>`	—
Ref to the SVG element
`strokeWidth`	`number`	—
Stroke thickness for SVG lines and shapes (in px or pt).
`children`	`ReactNode`	—
Icon content (required). Accepts: icons from `~/icons`; custom inline SVG; third-party icon components (e.g. Lucide, Tabler)

Also accepts all HTML attributes.

`PasswordFieldToggleIconButton`

Prop	Type	Default
`size`	`IconButtonSize`	—
Size of the button container. Controls padding and overall clickable area.
`asChild`	`boolean`	—
When true, renders the button as a child component using `Slot` (e.g., from Radix UI). Enables polymorphic rendering — useful for making the button act as a link or custom tag.
`variant`	`ButtonBaseVariant`	—
Defines the visual style of the button, affecting color schemes and emphasis.
`appearance`	`ButtonBaseAppearance`	—
Adjusts the button's structural appearance (background, border, etc.).
`disabled`	`boolean`	—
Disables the button when true. Prevents user interaction and applies a visually disabled state. Not applied with `asChild`: the child element owns its disabled state, for example, `aria-disabled` or a link without `href`.
`className`	`string`	—
Optional custom CSS class for the button element. Useful for design system overrides or scoped styles.
`children`	`ReactNode`	—
Content of the button — text, icon, or any React node.
`ref`	`Ref<HTMLButtonElement>`	—
Ref forwarded to the native `<button>` element. Allows direct DOM access for focus management or measuring.

Also accepts all <button> attributes.

Types

PasswordFieldProps
PasswordFieldInputProps
PasswordFieldToggleIconButtonProps
PasswordFieldShownIconProps
PasswordFieldHiddenIconProps

State Model

Visibility can be controlled with shown and onChangeShown, or uncontrolled with defaultShown.
PasswordFieldInput switches its type based on context.
The toggle button flips the visibility and keeps the focus where the browser put it, like a native button; it exposes the visibility with aria-pressed.
A custom onClick on the toggle runs after the toggle, it does not replace it.