PasswordField
Labelled password input with show/hide toggle — wraps the Input primitive with a plaintext reveal button
Interactive-mode
Examples
Default password field
With help text
Use a mix of letters, numbers, and symbols.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| PasswordField | A labelled password input chunk. Wraps the Input primitive with type=password and a show/hide toggle button positioned inside the input using relative/absolute positioning. Clicking the toggle reveals or masks the value. |
PasswordField
A labelled password input chunk. Wraps the Input primitive with type=password and a show/hide toggle button positioned inside the input using relative/absolute positioning. Clicking the toggle reveals or masks the value.
| Property | Type | Required | Description |
|---|---|---|---|
| Label | string? | Label text rendered above the input via FormLabel. Omit to hide the label. | |
| HelpText | string? | Helper text rendered below the input. Shown in text-danger-fg when Error is true, otherwise text-muted-foreground. | |
| Error | bool | Applies error styling to the label and help text. Default: false. | |
| Required | bool | Appends a red asterisk to the label via FormLabel. Default: false. | |
| Disabled | bool | Disables the underlying input. Default: false. | |
| Id | string | HTML id for the input — wired to the label's for attribute. Auto-generated by default. | |
| Value | string? | Current password value. Use @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<string?> | Fires when the value changes. Part of the @bind-Value pair. | |
| Placeholder | string? | Placeholder text shown in the empty input. |