Just like Input Field, Password Field is used for password inputs but gives an extra functionality of show and hide password.

This component is made using Input Field and Input Group, making all native field props available for use.

Anatomy

Import the component.

import { PasswordField } from "@rafty/ui";

<PasswordField />;

Usage

<PasswordField />

Size

There are 3 size options in input field: sm, md (default) & lg.

<div className="space-y-2">
  <PasswordField size="sm" />
  <PasswordField size="md" />
  <PasswordField size="lg" />
</div>

Variant

There are 3 variant options in input field: solid, outline (default) & `ghost

<div className="space-y-2">
  <PasswordField variant="outline" />
  <PasswordField variant="ghost" />
  <PasswordField variant="solid" />
</div>

API

Root