---
title: Password field
description: Password fields allow users to securely enter sensitive information with a show/hide toggle.
category: Forms
related: [TextField, Label, Container]
commonPatterns: [login-password, signup-password, change-password]
---

Source: https://clickhouse.design/click-ui/passwordField

# Password field

Password fields allow users to securely enter sensitive information. They include a toggle button to show or hide the password text for better usability.

## Example

## Props

| Prop        | Type                                                              | Default value | Description                                                                                          |
| ----------- | ----------------------------------------------------------------- | ------------- | ---------------------------------------------------------------------------------------------------- |
| label       | `ReactNode`                                                       | `""`          | Label text or content displayed above or beside the password field                                   |
| placeholder | `string`                                                          | `""`          | Placeholder text displayed when the field is empty                                                   |
| value       | `string`                                                          | `""`          | Current value of the password field (controlled component)                                           |
| onChange    | `(inputValue: string, e?: ChangeEvent<HTMLInputElement>) => void` | `undefined`   | Callback function called when the password value changes. Receives the new value and optional event. |
| error       | `boolean`                                                         | `false`       | Whether the field is in an error state, typically shown with red styling                             |
| disabled    | `boolean`                                                         | `false`       | Whether the field is disabled and cannot be interacted with                                          |

```tsx
import { PasswordField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyPasswordField() {
const [password, setPassword] = useState('')
return (
  <PasswordField 
    id="example"
    label="Password"
    placeholder="Enter password"
    value={password}
    onChange={(value, e) => setPassword(value)}
  />
)
}
```

## Quick start

```tsx
import { PasswordField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyPasswordField() {
const [password, setPassword] = useState('')
return (
  <PasswordField 
    id="password"
    label="Password"
    placeholder="Enter password"
    value={password}
    onChange={(value, e) => setPassword(value)}
  />
)
}
```

## Related components

- **TextField**: For regular text input, similar API to PasswordField.
- **Label**: Provides accessible labels for password fields.
- **Container**: For organizing password fields within forms.

## Common use cases

### Login password

```tsx
import { PasswordField } from '@clickhouse/click-ui'
import { useState } from 'react'

function LoginPassword() {
const [password, setPassword] = useState('')
return (
  <PasswordField
    id="password"
    label="Password"
    placeholder="Enter your password"
    value={password}
    onChange={(value, e) => setPassword(value)}
  />
)
}
```

### Signup password

```tsx
import { PasswordField, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function SignupPassword() {
const [password, setPassword] = useState('')
return (
  <Container orientation='vertical' gap='md'>
    <PasswordField
      id="password"
      label="Password"
      placeholder="Create a password"
      value={password}
      onChange={(value, e) => setPassword(value)}
    />
    <PasswordField
      id="confirm-password"
      label="Confirm Password"
      placeholder="Confirm your password"
      value={password}
      onChange={(value, e) => setPassword(value)}
    />
  </Container>
)
}
```

### Error state

```tsx
import { PasswordField } from '@clickhouse/click-ui'
import { useState } from 'react'

function PasswordFieldError() {
const [password, setPassword] = useState('')
return (
  <PasswordField
    id="password"
    label="Password"
    placeholder="Enter password"
    value={password}
    onChange={(value, e) => setPassword(value)}
    error
  />
)
}
```