PasswordField

PasswordField is a compound component built on TextField.

Overview

PasswordField reuses the TextField styling contract. Its unique visual layer is the toggle icon button, which maps to the shared input height and hover tokens.

Public CSS Variables

Password

Variable	Value	Affects
keeps the toggle square with the field heighttoggle button		No visible change in this state
default icon colortoggle button		No visible change in this state
hover surfacetoggle button		No visible change in this state
active surfacetoggle button		No visible change in this state
Button icon color.`PasswordFieldToggleIconButton`		No visible change in this state
Button icon color on hover.`PasswordFieldToggleIconButton`		No visible change in this state
Button icon color while pressed.`PasswordFieldToggleIconButton`		No visible change in this state
Button background.`PasswordFieldToggleIconButton`		No visible change in this state
Button background on hover.`PasswordFieldToggleIconButton`		No visible change in this state
Button background while pressed.`PasswordFieldToggleIconButton`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root inherits the same wrapper contract as TextField.

Toggle Button

PasswordFieldToggleIconButton maps --icon-button-size to --input-height and uses transparent background until hover or active state.

State And Variant Interaction

size flows from the TextField root
disabled behavior is inherited through input and context
shown/hidden state affects icon rendering, not the wrapper surface

Examples

Custom visibility icons

LTRRTL

custom-visibility-icons.tsx · 27 lines

import {
  Label,
  PasswordField,
  PasswordFieldHiddenIcon,
  PasswordFieldInput,
  PasswordFieldShownIcon,
  PasswordFieldToggleIconButton,
} from '@vega-ui/react';
import { LockIcon, LockOpenIcon } from '@vega-ui/icons';
import { useId } from 'react';

export default function CustomVisibilityIcons() {

Do Not Override

making the toggle look like a separate unrelated action
breaking the shared --input-height sizing between field and toggle