PasswordInput

Capture password data from user with visibility toggle button. Supports all standard input features.

Import

import { PasswordInput } from '@tidbcloud/uikit'

Basic Usage

import { PasswordInput } from '@tidbcloud/uikit'
 
function Demo() {
  return <PasswordInput label="Password" placeholder="Enter your password" />
}

Controlled

import { useState } from 'react'
import { PasswordInput } from '@tidbcloud/uikit'
 
function Demo() {
  const [value, setValue] = useState('')
  return <PasswordInput value={value} onChange={(event) => setValue(event.currentTarget.value)} />
}

Controlled Visibility

import { useDisclosure } from '@tidbcloud/uikit'
import { PasswordInput, Stack } from '@tidbcloud/uikit'
 
function Demo() {
  const [visible, { toggle }] = useDisclosure(false)
 
  return (
    <Stack>
      <PasswordInput label="Password" visible={visible} onVisibilityChange={toggle} />
      <PasswordInput label="Confirm password" visible={visible} onVisibilityChange={toggle} />
    </Stack>
  )
}

Custom Visibility Icon

import { PasswordInput } from '@tidbcloud/uikit'
import { IconEyeCheck, IconEyeOff } from '@tabler/icons-react'
 
const VisibilityToggleIcon = ({ reveal }: { reveal: boolean }) =>
  reveal ? <IconEyeOff size={16} /> : <IconEyeCheck size={16} />
 
function Demo() {
  return <PasswordInput label="Password" visibilityToggleIcon={VisibilityToggleIcon} />
}

With Left Section

import { PasswordInput } from '@tidbcloud/uikit'
import { IconLock } from '@tabler/icons-react'
 
function Demo() {
  return <PasswordInput leftSection={<IconLock size={18} />} label="Password" placeholder="Enter password" />
}

Key Props

Prop	Type	Description
`value`	`string`	Controlled value
`onChange`	`(event) => void`	Called when value changes
`visible`	`boolean`	Controlled visibility state
`onVisibilityChange`	`(visible: boolean) => void`	Called when visibility changes
`defaultVisible`	`boolean`	Default visibility state
`visibilityToggleIcon`	`FC<{ reveal: boolean }>`	Custom visibility toggle icon
`visibilityToggleButtonProps`	`object`	Props for toggle button
`label`	`ReactNode`	Input label
`description`	`ReactNode`	Input description
`error`	`ReactNode`	Error message
`disabled`	`boolean`	Disable input
`leftSection`	`ReactNode`	Content on left side
`size`	`MantineSize`	Input size
`radius`	`MantineRadius`	Border radius

Paper Pill