A password field component for your forms.
import { PasswordField } from '@backstage/ui';
<PasswordField />| Prop | Type | Default | Responsive |
|---|---|---|---|
| size | smallmedium | small | Yes |
| label | string | - | No |
| icon | ReactNode | - | No |
| description | string | - | No |
| name | string | - | No |
| className | string | - | No |
| style | CSSProperties | - | No |
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>Here's a simple PasswordField with a description.
<PasswordField label="Label" description="Description" placeholder="Enter a secret" />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-PasswordFieldbui-PasswordField[data-size="small"]bui-PasswordField[data-size="medium"]bui-PasswordFieldInputWrapperbui-PasswordFieldInputbui-PasswordFieldIconbui-PasswordFieldVisibility