PasswordInput

PasswordInput is a component that allows users to input passwords with a visibility toggle.

If you are not using FormControl, set aria-label or aria-labelledby to PasswordInput.

<PasswordInput aria-label="Your password" />

Copied!

<VStack gap="sm">
  <Text as="h3" id="label">
    Your password
  </Text>

  <PasswordInput aria-labelledby="label" />
</VStack>

Copied!

ARIA Roles and Attributes

Component	Role and Attributes	Usage
`PasswordInputField` Internal	`aria-invalid`	Set to `"true"` if `isInvalid` is set.
	`aria-disabled`	Set to `"true"` if `isDisabled` is set.
	`aria-readonly`	Set to `"true"` if `isReadOnly` is set.
	`aria-required`	Set to `"true"` if `isRequired` is set.
`PasswordInputStrengthMeter`	`role="meter"`	Indicates that this is a meter.
	`aria-label`	Sets `"Password strength meter"`.
	`aria-valuemin`	Sets the `0` value.
	`aria-valuemax`	Sets the `max` value.
	`aria-valuenow`	Sets the current value.

Edit this page on GitHub