Password Input

A password field whose strength reads as temperature: four segments light left to right from deep to accent to hot to white.

$149 once · every Pro piece

Customize

Label

Value

Strength meter

Disabled

The reveal toggle keeps focus and caret, Caps Lock is called out while typing, and strength changes are announced politely.

Install

npx shadcn@latest add @obsyde/password-input

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { PasswordInput } from '@/components/obsyde/ember/password-input/PasswordInput';

export function Example() {
  return (
    <PasswordInput label="Password" />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

ember/password-input/PasswordInput.tsxcomponent
ember/password-input/password-input.cssstyles
ember/password-input/PasswordInputDemo.tsxdemo
ember/forms-kit/kit.tsxshared
ember/shared/spring.tsshared
ember/shared/accent.tsshared
ember/shared/ember.cssshared

API

Prop	Type	Default
`accent`Accent	`'ember' \| 'volt' \| 'arc'`	`'ember'`
`label`Label	`string`	`'Password'`
`value`Value	`string`	`—`
`showStrength`Strength meter	`boolean`	`true`
`disabled`Disabled	`boolean`	`false`