PasswordInput

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

Examples

Default

Password

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

With Value

Password

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Disabled

Password

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

With Status

Password

Show password

Password is too short

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Required

Password · Required

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Optional

Password · Optional

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

With Description

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

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Sizes

Small

Show password

Medium

Show password

Large

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<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

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Hidden Label

Password

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

With Label Tooltip

Password

Your account password. Never share this with anyone.

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

With Forgot Password Link

Password

Forgot password?

Show password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<ControlledPasswordInput {...args} />

Read Only

Password

function ControlledPasswordInput({
  isOptional,
  isRequired,
  value: initialValue = '',
  ...args
}: ControlledPasswordInputProps): React.JSX.Element {
  const [value, setValue] = useState(initialValue);
  const props = {
    ...args,
    onChange: setValue,
    value,
  };

  if (isOptional === true) {
    return <PasswordInput {...props} isOptional />;
  }

  return <PasswordInput {...props} isRequired={isRequired} />;
}

<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.
role	AriaRole	—	ARIA role applied to the input element.
aria-activedescendant	AriaAttributes['aria-activedescendant']	—	Identifies the currently active element in a composite widget controlled by the input.
aria-autocomplete	AriaAttributes['aria-autocomplete']	—	Indicates whether typing displays completion suggestions.
aria-controls	AriaAttributes['aria-controls']	—	Identifies the element controlled by the input.
aria-required	boolean	—	Announces the input as required to assistive technology without showing the Required marker, for fields whose requirement is already obvious. isRequired implies it.
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.
isDisabled	boolean	false	Whether the input is disabled.
size	"sm" | "md" | "lg"	—	Visual size.
isLoading	boolean	false	Whether the input is loading.
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.
isReadOnly	boolean	false	Whether the value is displayed without allowing focus or interaction.
labelEnd	ReactNode	—	Content shown at the end of the label row, such as a link. It renders outside the label, so it does not focus the control or change its accessible name. It stays visible when isLabelHidden is true.
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	—
data-testid	string	—	Test ID applied to the input element.