> ## Documentation Index
> Fetch the complete documentation index at: https://api.fanvue.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# PasswordField

> A password input with a show/hide toggle, in three sizes, taking the rest of its API from TextField.

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";
import type { PasswordFieldProps, PasswordFieldSize } from "@fanvue/ui";
```

## Examples

## Default

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-passwordfield--default&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PasswordField — Default" />
</Frame>

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";

<PasswordField label="Label" placeholder="Password" />
```

## Error State

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-passwordfield--error-state&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PasswordField — Error State" />
</Frame>

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";

<PasswordField
  label="Password"
  placeholder="Enter your password"
  error
  errorMessage="Password is required"
/>
```

## With Helper Text

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-passwordfield--with-helper-text&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PasswordField — With Helper Text" />
</Frame>

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";

<PasswordField
  label="Password"
  placeholder="Enter your password"
  helperText="Must be at least 8 characters"
/>
```

## All Sizes

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-passwordfield--all-size-variants&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PasswordField — All Sizes" />
</Frame>

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";

<div className="flex w-[375px] flex-col gap-4">
  <PasswordField size="48" label="Size 48" placeholder="Password" />
  <PasswordField size="40" label="Size 40" placeholder="Password" />
  <PasswordField size="32" label="Size 32" placeholder="Password" />
</div>
```

## Validated

<Frame>
  <iframe src={"https://main--697a1b6dd4dad73ee9c0e5f5.chromatic.com/iframe.html?id=components-passwordfield--validated&viewMode=story&shortcuts=false&singleStory=true&globals=theme:light"} width="100%" height="240" style={{border: "none", borderRadius: "8px"}} loading="lazy" title="PasswordField — Validated" />
</Frame>

```tsx theme={null}
import { PasswordField } from "@fanvue/ui";

<PasswordField
  label="Password"
  placeholder="Enter your password"
  validated
  defaultValue="securepassword123"
/>
```

## Props

## PasswordField

<ParamField path="action" type="ReactNode">
  Trailing interactive element pinned to the right edge — typically a `Chip` or `Button` (the "with button" field type). Reduces the right padding so the control sits flush, and clicks on it do not steal focus from the input.
</ParamField>

<ParamField path="error" type="boolean" default="false">
  Whether the text field is in an error state.
</ParamField>

<ParamField path="errorMessage" type="string">
  Error message displayed below the input. Shown instead of `helperText` when `error` is `true`.
</ParamField>

<ParamField path="fullWidth" type="boolean" default="false">
  Whether the text field stretches to fill its container width.
</ParamField>

<ParamField path="helperText" type="string">
  Helper text displayed below the input. Replaced by `errorMessage` when `error` is `true`.
</ParamField>

<ParamField path="label" type="string">
  Label text displayed above the input. Also used as the accessible name.
</ParamField>

<ParamField path="leftIcon" type="ReactNode">
  Icon element displayed at the left side of the input.
</ParamField>

<ParamField path="leftLabel" type="ReactNode">
  Fixed, non-editable label pinned inside the left edge of the field — for a prefix such as a currency symbol or country code.
</ParamField>

<ParamField path="rightLabel" type="ReactNode">
  Fixed, non-editable label pinned inside the right edge of the field — for a unit or suffix such as a currency code or domain.
</ParamField>

<ParamField path="size" type="&#x22;32&#x22; | &#x22;40&#x22; | &#x22;48&#x22;">
  Size variant of the password field
</ParamField>

<ParamField path="validated" type="boolean" default="false">
  Whether the text field is validated.
</ParamField>

## Exported types

Also exported from `@fanvue/ui`: `PasswordFieldProps`, `PasswordFieldSize`.

***

**Setup:** [Installation](/docs/ui/installation) · [Theming](/docs/ui/theming)