Password

A basic widget for getting the user password input.

'use client';

import { Password } from 'rizzui/password';

Default

The default style of Password component.

Password

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return <Password label="Password" placeholder="Enter your password" />;
}

Variants

You can change the style of Password using variant property.

Outline

Flat

Text

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return (
    <>
      <Password
        label="Outline"
        placeholder="Enter your password"
        variant="outline"
      />
      <Password label="Flat" placeholder="Enter your password" variant="flat" />
      <Password label="Text" placeholder="Enter your password" variant="text" />
    </>
  );
}

Sizes

You can change the style of Password using size property.

Small

Default

Large

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return (
    <>
      <Password label="Small" placeholder="Enter your password" size="sm" />
      <Password label="Default" placeholder="Enter your password" />
      <Password label="Large" placeholder="Enter your password" size="lg" />
    </>
  );
}

Prefix & Visibility Icon

You can change the style of Password using prefix, visibilityToggleIcon property.

Password

Custom Visibility Icon

'use client';

import { Password } from 'rizzui/password';
import { LockClosedIcon, LockOpenIcon } from '@heroicons/react/24/outline';

export default function App() {
  return (
    <>
      <Password
        label="Password"
        placeholder="Enter your password"
        prefix={<LockClosedIcon className="h-[18px] w-[18px]" />}
      />
      <Password
        label="Custom Visibility Icon"
        placeholder="Enter your password"
        visibilityToggleIcon={(visible) =>
          visible ? (
            <LockOpenIcon className="h-auto w-5" />
          ) : (
            <LockClosedIcon className="h-auto w-5" />
          )
        }
      />
    </>
  );
}

With Clearable Button

You can create clearable Password using clearable property.

Password

'use client';

import { useState } from 'react';
import { Password } from 'rizzui/password';

export default function App() {
  const [state, setState] = useState('my_password');

  return (
    <>
      <Password
        label="Password"
        value={state}
        clearable={true}
        onClear={() => setState('')}
        onChange={(e) => setState(e.target.value)}
        placeholder="Your password"
      />
    </>
  );
}

Disabled

You can disable Password using disabled property.

Disabled Password

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return (
    <Password
      label="Disabled Password"
      placeholder="Enter your password"
      disabled
    />
  );
}

With Helper Text

You can show help text to Password using helperText property.

Password

This is helper text

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return (
    <Password
      label="Password"
      placeholder="Enter your password"
      helperText="This is helper text"
    />
  );
}

With Error Message

You can show the validation error message using error property.

Password

This field is required.

'use client';

import { Password } from 'rizzui/password';

export default function App() {
  return (
    <Password
      label="Password"
      placeholder="Enter your password"
      error="This field is required."
    />
  );
}

With External State

You can manage visibility state externally using isPasswordVisible.

Visibility toggle outside

'use client';

import React from 'react';
import { Password, Flex, Button } from 'rizzui';

export default function App() {
  const [showPassword, setShowPassword] = React.useState(false);
  return (
    <Flex align="end" justify="center">
      <Password
        label="Visibility Toggle from outside"
        placeholder="Your password"
        hideVisibilityToggleIcon
        isPasswordVisible={showPassword}
        className="grow"
      />
      <Button onClick={() => setShowPassword(!showPassword)}>
        {showPassword ? 'Hide' : 'Show'}
      </Button>
    </Flex>
  );
}

API Reference

---

Password Props

Here is the API documentation of the Password component. And the rest of the props are the same as the original html input field type password.

Props	Type	Description	Default
label	ReactNode	Set field label	__
labelWeight	LabelWeight	Set label font weight	"medium"
placeholder	string	Set input placeholder text	__
variant	PasswordVariants	The variants of the component are:	"outline"
size	PasswordSizes	The size of the component. "sm" is equivalent to the dense input styling.	"md"
disabled	boolean	Whether the input is disabled or not	__
clearable	boolean	Add clearable option	__
hideVisibilityToggleIcon	boolean	Hides visibility toggle icon	__
isPasswordVisible	boolean	Control password visibility from outside.	__
onClear	PasswordOnclear	Callback function called when the clear button is clicked	__
prefix	ReactNode	The prefix is designed for adding any icon or text on the Input field's start (it's a left icon for the ltr and right icon for the rtl)	__
visibilityToggleIcon	((visible: boolean) => ReactNode)	Custom password visibility toggle icon. Receives the current visibility state as a parameter.	__
helperText	ReactNode	Add helper text. Can be a string or a React component	__
error	string	Show error message using this prop	__
labelClassName	string	Override default CSS style of label	__
inputClassName	string	Override default CSS style of input	__
prefixClassName	string	Override default CSS style of prefix	__
visibilityToggleIconClassName	string	Override default CSS style of password show/hide toggle icon	__
helperClassName	string	Override default CSS style of helperText	__
errorClassName	string	Override default CSS style of error message	__
className	string	Add custom classes to the root of the component	__
ref	Ref<HTMLInputElement>		__
...	InputHTMLAttributes	native props like value, onChange, onFocus, onBlur ...	__

Password Variants

type PasswordVariants = 'outline' | 'flat' | 'text';

Label Weight

type LabelWeight = 'normal' | 'medium' | 'semibold' | 'bold';

Password Sizes

type PasswordSizes = 'sm' | 'md' | 'lg';

Password onClear

type PasswordOnclear = (event) => void;