Forms & choicesBrick 0.1.2

Password Toggle Field

Password Toggle Field is native password entry with an explicitly named visibility action, backed by Atom Password Toggle Field. Atom owns visibility state, Field and Form relationships, reset, submission safety, and native input behavior; Brick owns recipes and default eye artwork.

Live example

Built from the published package

Interactive

Password

Choose with confidence

Know when Password Toggle Field is the right part

Use it when

Use it when revealing a typed password helps people verify long or complex credentials.

Choose another path when

Use Input with type="password" when no reveal action is wanted. Do not use it for OTP codes or imply that visible text remains private. Password strength, generation, storage, and policy remain application concerns.

Installation and imports

tsx

import { Field, PasswordToggleField } from "@flowstack-ui/brick";
// or import { PasswordToggleField } from "@flowstack-ui/brick/password-toggle-field";
import "@flowstack-ui/brick/styles.css";

The complete stylesheet above is the recommended default. For a measured route-aware build, replace it with the shared foundation and this component's stylesheet:

tsx

import "@flowstack-ui/brick/styles/core.css"; // once at the application root
import "@flowstack-ui/brick/styles/password-toggle-field.css";

Add the modular stylesheet for every other Brick component the route renders. Do not combine modular styles with styles.css or tokens.css.

Quick start

tsx

<Field.Root id="password" required>
  <Field.Label>Password</Field.Label>
  <PasswordToggleField.Root>
    <PasswordToggleField.Input name="password" autoComplete="current-password" />
    <PasswordToggleField.Toggle />
  </PasswordToggleField.Root>
  <Field.Error>Enter a password.</Field.Error>
</Field.Root>

Visual recipes and states

Recipes, sizes, and shapes align with Input. Visibility changes native input type and artwork only, not geometry. Focus, invalid, disabled, read-only, and required states derive from Atom.

Examples

Use autoComplete="new-password" for account creation and localized labels such as showLabel="Mostrar contraseña" and hideLabel="Ocultar contraseña".

Public contract

API

Start with the public parts and root options below. Components with multiple parts separate each area into its own named subsection.

Public exports are PasswordToggleField, PasswordToggleFieldRoot, PasswordToggleFieldInput, PasswordToggleFieldToggle, PasswordToggleFieldIcon, PasswordToggleFieldRootProps, PasswordToggleFieldInputProps, PasswordToggleFieldToggleProps, PasswordToggleFieldIconProps, PasswordToggleFieldVariant, PasswordToggleFieldSize, and PasswordToggleFieldShape.

Root prop	Values	Default
`variant`	`outline`, `soft`, `underline`	`outline`
`size`	`sm`, `md`, `lg`	`md`
`shape`	`sharp`, `rounded`, `pill`	`rounded`
`fullWidth`	boolean	`true`
`showLabel`	string	`Show password`
`hideLabel`	string	`Hide password`

underline rejects shape. Root preserves controlled/uncontrolled visibility, change callback, disabled, read-only, invalid, required, and validation props. Input preserves supported password input/native props. Toggle children replace the default Icon. Icon accepts required visible/hidden nodes, with Brick defaults when omitted.

Shared responsibility

Accessibility

Use a visible Field label. The action name describes the next action and changes between showLabel and hideLabel; localize both. Atom connects Field-generated IDs, descriptions, errors, and state to Input. Reset returns uncontrolled visibility to its default. Before native submit, Atom restores type="password" even if the value was visible.

Responsive behavior

The input shrinks while the square action remains contained at the logical end. Long values edit natively, localization does not alter the fixed visual target, and RTL mirrors placement logically.

Stable visual contract

Styling and tokens

Customization

Prefer recipe props, semantic tokens, then component variables. Replace Toggle children or compose Icon for product artwork while retaining an accessible action name.

Tokens and CSS hooks

Public variables are --brick-password-height and --brick-password-radius. Root exposes data-variant, data-size, data-shape, data-full-width, and data-slot; Atom exposes visibility and form-state data attributes. Do not target private SVG paths.

Advanced reference

Open these details only when you need to inspect DOM ownership, native forwarding, or lower-level composition.

Maintainer resources

Tests, playground evidence, source notes, and release history remain available without crowding the plug-and-play guide.

Source docs Changelog Playground