---
sidebar_position: 2
---

import { Password } from "rizzui";
import Paper from "@site/src/components/paper";
import PasswordClearable, { PasswordVisibilityToggle } from "@site/src/components/password";
import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline";

# Password

A basic widget for getting the user password input.

```tsx
import { Password } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Password** component.

<Paper className="text-gray-950 block">
  <Password
    label="Password"
    placeholder="Enter your password"
  />
</Paper>

```tsx
import { Password } from "rizzui";

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

<div className="mb-16" />

## Variants

You can change the style of **Password** using [**variant**](#password-variants) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-3 gap-4 text-gray-950">
  <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"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the style of **Password** using [**size**](#password-sizes) property.

<Paper className="justify-start items-start gap-4 text-gray-950">
  <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"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the style of **Password** using [**rounded**](#password-rounded) property.

<Paper className="grid grid-cols-1 sm:grid-cols-2 2xl:grid-cols-4 gap-4 text-gray-950">
  <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 None"
    placeholder="Enter your password"
    rounded="none"
  />
  <Password
    label="Rounded Full"
    placeholder="Enter your password"
    rounded="pill"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Prefix & Visibility Icon

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

<Paper className="grid grid-cols-1 gap-4 text-gray-950">
  <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" />
    }
  />
</Paper>

```tsx
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" />
          )
        }
      />
    </>
  );
}
```

<div className="mb-16" />

## With Clearable Button

You can create clearable **Password** using **clearable** property.

<Paper className="block text-gray-950">
  <PasswordClearable
    label="Password"
    variant="active"
  />
</Paper>

```tsx
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"
      />
    </>
  );
}
```

<div className="mb-16" />

## Disabled

You can disable **Password** using **disabled**. Disabled password fileds does not have any effect of property **color** property.

<Paper className="block text-gray-950">
  <Password
    label="Active Disabled"
    placeholder="Enter you passwrod"
    color="primary"
    disabled
  />
</Paper>

```tsx
import { Password } from "rizzui";

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

<div className="mb-16" />

## With Helper Text

You can show help text to **Password** using **helperText** property.

<Paper className="block text-gray-950">
  <Password
    label="Password"
    placeholder="Enter your password"
    helperText="This is helper text"
  />
</Paper>

```tsx
import { Password } from "rizzui";

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

<div className="mb-16" />

## With Error Message

You can show the validation error message using **error** property.

<Paper className="block text-gray-950">
  <Password
    label="Password"
    placeholder="Enter your password"
    error="This field is required."
  />
</Paper>

```tsx
import { Password } from "rizzui";

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

<div className="mb-20" />

<div className="mb-16" />

## With External State

You can manage visibility state externally using **isPasswordVisible**.

<Paper>
  <PasswordVisibilityToggle />
</Paper>

```tsx
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

<hr />

<div className="mb-10" />

### 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.

<div className="overflow-x-auto password-props-row-highlight">

|             Props             |                  Type                  |                                                                Description                                                                |   Default   |
| :---------------------------: | :------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------: | :---------: |
|             label             |              `ReactNode`               |                                                              Set field label                                                              |    \_\_     |
|          labelWeight          |      [LabelWeight](#label-weight)      |                                                           Set label font weight                                                           | `"medium"`  |
|          placeholder          |                `string`                |                                                        Set input placeholder text                                                         |    \_\_     |
|            variant            | [PasswordVariants](#password-variants) |                                                    The variants of the component are:                                                     | `"outline"` |
|             size              |    [PasswordSizes](#password-sizes)    |                                The size of the component. `"sm"` is equivalent to the dense input styling.                                |   `"md"`    |
|            rounded            | [PasswordRoundeds](#password-rounded)  |                                                         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](#password-onclear)  |                                                                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** ...                                   |    \_\_     |

</div>

<div className="mb-10" />

### Password Variants

```ts
type PasswordVariants = "outline" | "flat" | "text";
```

<div className="mb-10" />

### Label Weight

```ts
type LabelWeight = "normal" | "medium" | "semibold" | "bold";
```

<div className="mb-10" />

### Password Sizes

```ts
type PasswordSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Password Rounded

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

<div className="mb-10" />

### Password onClear

```ts
type PasswordOnclear = (event) => void;
```
