Password

A basic widget for getting the user password input.

import { Password } from "rizzui";

Default

The default style of Password component.

Password

import { Password } from "rizzui";

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

import { Password } from "rizzui";

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

Extra Large

import { Password } from "rizzui";

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"
      />
      <Password
        label="Extra Large"
        placeholder="Enter your password"
        size="xl"
      />
    </>
  );
}

Rounded

You can change the style of Password using rounded property.

Rounded Small

Rounded Default

Rounded Large

Rounded None

Rounded Full

import { Password } from "rizzui";

export default function App() {
  return (
    <>
      <Password
        label="Rounded None"
        placeholder="Enter your password"
        rounded="none"
      />
      <Password
        label="Rounded Small"
        placeholder="Enter your password"
        rounded="sm"
      />
      <Password
        label="Rounded Default"
        placeholder="Enter your password"
      />
      <Password
        label="Rounded Large"
        placeholder="Enter your password"
        rounded="lg"
      />
      <Password
        label="Rounded Full"
        placeholder="Enter your password"
        rounded="pill"
      />
    </>
  );
}

Prefix & Visibility Icon

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

Password

Custom Visibility Icon

import { Password } from "rizzui";
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

import { useState } from "react";
import { Password } from "rizzui";

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. Disabled password fileds does not have any effect of property color property.

Active Disabled

import { Password } from "rizzui";

export default function App() {
  return (
    <Password
      label="Active Disabled"
      placeholder="Enter you passwrod"
      color="primary"
      disabled
    />
  );
}

With Helper Text

You can show help text to Password using helperText property.

Password

This is helper text

import { Password } from "rizzui";

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.

import { Password } from "rizzui";

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

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"
rounded	PasswordRoundeds	The rounded variants are:	"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	clear event	__
prefix	ReactNode	The prefix is design 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)	It is the password visibility toggle icon.	__
helperText	ReactNode	Add helper text. It could be 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" | "xl";

Password Rounded

type PasswordRounded = "sm" | "md" | "lg" | "none" | "pill";

Password onClear

type PasswordOnclear = (event) => void;