Components Forms

PasswordInput

A password field with a show and hide button outside the tab order.

import { PasswordInput } from '@kition/tessera-ui'

Playground

Props

size

placeholder

invalid

disabled

What is shown

import { PasswordInput } from '@kition/tessera-ui'

<PasswordInput size="md" placeholder="Password" />

Examples

Show and hide

password-input.tsx

import { PasswordInput } from '@kition/tessera-ui'

export default function Demo() {
  return <PasswordInput size="md" defaultValue="sk-test-not-a-real-key" aria-label="API key" />
}

Props

PasswordInput

A password field with a show/hide button; the button keeps out of the tab order. className goes on the field itself, as on TextInput.

Prop	Type	Default	Description
`size`	`ControlSize`	`'sm'`
`prefix`	`ReactNode`	—	An icon (or short text) inside the field before the text: a search glass, a person.
`invalid`	`boolean`	—
`wrapperClassName`	`string`	—	Classes for the box around the field and its show/hide button (layout: width, margins).

Also takes the attributes of its HTML element (`className`, `aria-*`, events…).