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.9.0#

Changes

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