PasswordField

Usage

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

<PasswordField />

API reference

Examples

Sizes

We support two different sizes: small, medium.

<Flex direction="row" gap="4">
  <PasswordField size="small" placeholder="Small" icon={<Icon name="sparkling" />} />
  <PasswordField size="medium" placeholder="Medium" icon={<Icon name="sparkling" />} />
</Flex>

With description

Here's a simple PasswordField with a description.

<PasswordField label="Label" description="Description" placeholder="Enter a secret" />

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-PasswordField[data-size="small"]
• bui-PasswordField[data-size="medium"]
• bui-InputVisibility

Changelog