PasswordInput

Password input with a toggle to show or hide the entered value.

Examples

Default

Password

Show password

<ControlledPasswordInput {...args} />

With Value

Password

Show password

<ControlledPasswordInput {...args} />

Disabled

Password

Show password

<ControlledPasswordInput {...args} />

With Status

Password

Show password

Password is too short

<ControlledPasswordInput {...args} />

Required

Password · Required

Show password

<ControlledPasswordInput {...args} />

Optional

Password · Optional

Show password

<ControlledPasswordInput {...args} />

With Description

PasswordMust be at least 8 characters with a number and symbol.

Show password

<ControlledPasswordInput {...args} />

Sizes

Small

Show password

Medium

Show password

Large

Show password

<div style={{display: 'flex', flexDirection: 'column', gap: 16}}>
  <ControlledPasswordInput label="Small" placeholder="Password" size="sm" />
  <ControlledPasswordInput
    label="Medium"
    placeholder="Password"
    size="md"
  />
  <ControlledPasswordInput label="Large" placeholder="Password" size="lg" />
</div>

Loading

Password

Show password

<ControlledPasswordInput {...args} />

Hidden Label

Password

Show password

<ControlledPasswordInput {...args} />

With Label Tooltip

Password

Your account password. Never share this with anyone.

Show password

<ControlledPasswordInput {...args} />

API

PasswordInput

Password input with a toggle to show or hide the entered value.

Prop	Type	Default	Description
label*	string	—	Field label.
style	CSSProperties	—	Inline styles applied to the field root, or to the input wrapper when the input is inside an InputGroup.
ref	Ref<HTMLInputElement>	—	Ref forwarded to the input element.
className	string	—	Additional CSS class names applied to the field root, or to the input wrapper when the input is inside an InputGroup.
onFocus	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input gains focus.
onBlur	(event: FocusEvent<HTMLInputElement>) => void	—	Called when the input loses focus.
onChange*	( value: string, event: ChangeEvent<HTMLInputElement> | null, ) => void	—	Called with the next string value.
onKeyDown	(event: KeyboardEvent<HTMLInputElement>) => void	—	Keyboard event handler for the input.
status	InputStatus	—	Status displayed on the field.
data-testid	string	—	Test ID applied to the input element.
isDisabled	boolean	false	Whether the input is disabled.
isLoading	boolean	false	Whether the input is loading.
size	"sm" | "md" | "lg"	—	Visual size.
value*	string	—	Controlled input value.
placeholder	string	—	Placeholder text.
autoComplete	string	—	HTML autocomplete hint for the browser.
description	ReactNode	—	Supporting text rendered below the label.
hasAutoFocus	boolean	false	Whether to focus the input on mount.
htmlName	string	—	HTML name attribute.
isLabelHidden	boolean	false	Whether to visually hide the label.
labelIcon	IconComponent	—	Icon shown before the label.
labelTooltip	ReactNode	—	Tooltip shown beside the label.
onEnter	() => void	—	Called when Enter is pressed.
isOptional	boolean	—
isRequired	boolean	—