PasswordInput

A component that allows users to enter a password with visibility toggle.

Usage

A compound component that provides a secure way to enter passwords, with built-in support for toggling visibility.

import { PasswordInput, InputGroup, Button, Icon } from "@elemnts-ui/react";

<PasswordInput.Root>
  <PasswordInput.Control>
    <InputGroup>
      <PasswordInput.Input asChild>
        <InputGroup.Input placeholder="Enter your password" />
      </PasswordInput.Input>
      <InputGroup.Addon>
        <PasswordInput.VisibilityTrigger asChild>
          <Button variant="ghost" size="sm">
            <PasswordInput.Indicator fallback={<Icon icon="tabler:eye-off" />}>
              <Icon icon="tabler:eye" />
            </PasswordInput.Indicator>
          </Button>
        </PasswordInput.VisibilityTrigger>
      </InputGroup.Addon>
    </InputGroup>
  </PasswordInput.Control>
</PasswordInput.Root>;

With Field

Use the PasswordInput within a Field component to provide a label, helper text, and validation states.

API Reference

PasswordInputRoot

The root container for the password input.

Prop	Type	Default
autoComplete	`"current-password" \| "new-password"`	`"current-password"`
defaultVisible	`boolean`	-
disabled	`boolean`	-
id	`string`	-
ids	`Partial<{ input: string; visibilityTrigger: string }>`	-
ignorePasswordManagers	`boolean`	-
invalid	`boolean`	-
name	`string`	-
onVisibilityChange	`(details: VisibilityChangeDetails) => void`	-
readOnly	`boolean`	-
required	`boolean`	-
translations	`Partial<{ visibilityTrigger: ((visible: boolean) => string) \| undefined }>`	-
visible	`boolean`	-
asChild	`boolean`	`false`

PasswordInputRootProvider

Provides a password input state machine to its children.

Prop	Type	Default
value	`UsePasswordInputReturn`	required
asChild	`boolean`	`false`

PasswordInputLabel

The label for the password input.

Prop	Type	Default
asChild	`boolean`	`false`

PasswordInputControl

The container for the input and visibility trigger.

Prop	Type	Default
asChild	`boolean`	`false`

PasswordInputInput

The password input field.

Prop	Type	Default
asChild	`boolean`	`false`

PasswordInputVisibilityTrigger

The button that toggles password visibility.

Prop	Type	Default
asChild	`boolean`	`false`

PasswordInputIndicator

Displays content based on the password visibility state.

Prop	Type	Default
fallback	`ReactNode`	-
asChild	`boolean`	`false`