PasswordField

A password input with visibility toggle, icon, and validation support.

Password

Usage#

import { PasswordField } from '@backstage/ui';

<PasswordField label="Password" />

API reference#

Prop	Type	Default	Description
size	smallmedium	small	Visual size of the input. Use small for dense layouts, medium for prominent fields.
label	string	-	Visible label displayed above the input.
secondaryLabel	string	-	Secondary text shown next to the label. If not provided and isRequired is true, displays Required.
description	string	-	Help text displayed below the label.
icon	ReactNode	-	Icon rendered before the input.
placeholder	string	-	Text displayed when the input is empty.
name	string	-	Form field name for submission.
isRequired	boolean	-	Whether the field is required for form submission.
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input is read-only.
value	string	-	Controlled value of the input.
defaultValue	string	-	Default value for uncontrolled usage.
onChange	(value: string) => void	-	Handler called when the input value changes.
isInvalid	boolean	-	Whether the field is in an invalid state.
className	string	-	Additional CSS class name for custom styling.

Inherits all React Aria TextField props.

Examples#

Sizes#

<Flex direction="column" gap="4">
  <PasswordField size="small" name="password" label="Password" />
  <PasswordField size="medium" name="password" label="Password" />
</Flex>

Password

With description#

<PasswordField
  name="password"
  label="Password"
  description="Enter your password"
/>

Password

Enter your password

With icon#

<PasswordField
  name="password"
  label="Password"
  icon={<RiLockLine />}
/>

Password

Validation#

<PasswordField
  name="password"
  label="Password"
  isRequired
  isInvalid
  description="Password must be at least 8 characters"
/>

Password

Password must be at least 8 characters

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-PasswordField
bui-PasswordFieldInputWrapper
bui-PasswordFieldInput
bui-PasswordFieldIcon
bui-PasswordFieldVisibility

Changelog#

Version 0.14.0#

Changes

Fixed form field descriptions not being connected to inputs via aria-describedby, making them accessible to screen readers. Added a descriptionSlot prop to FieldLabel that uses React Aria's slot mechanism to automatically wire up the connection. #33817

Version 0.13.0#

Changes

Migrated all components from useStyles to useDefinition hook. Exported OwnProps types for each component, enabling better type composition for consumers. #33050
Fixed isRequired prop not being passed to the underlying React Aria field components in TextField, SearchField, and PasswordField. Previously, isRequired was consumed locally for the secondary label text but never forwarded, which meant the input elements lacked aria-required="true" and React Aria's built-in required validation was not activated. #33050

Version 0.9.0#

Changes

Improved visual consistency of PasswordField, SearchField, and MenuAutocomplete components. #31679