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