### **Import**

```tsx
import { Password } from "@app-studio/web";
```

## Props

| Prop             | Type          | Description                                                                                                                               | Default |
| ---------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------- |
| visibleIcon      | ReactNode     | Icon to display when the password is visible.                                                                                             |         |
| hiddenIcon       | ReactNode     | Icon to display when the password is hidden.                                                                                              |         |
| isClearable      | boolean       | Indicates whether the input is clearable.                                                                                                 | false   |
| isDisabled       | boolean       | Makes the field unusable.                                                                                                                | false   |
| error            | boolean       | Indicates that the text field value failed the validation criteria.                                                                       | false   |
| helperText       | string        | Text used to inform the user that the content of the field is invalid.                                                                    |         |
| styles           | TextFieldStyles | Optional custom styles for the TextField.                                                                                                 |         |
| className        | string        | Optional className for the TextField.                                                                                                     |         |

### **Default**

It has type equals to “password” and isClearable set to false. It has all the props of the TextField component.

```tsx
<Password label="Password" value="123456" />
```

### **Disabled**

“**_isDisabled_**” makes the field unusable.

```tsx
<Password value="password" isDisabled />
```

### **Icon**

“**_visibleIcon_**” and “**_hiddenIcon_**” are icons indicating whether the password is visible or hidden.

```tsx
import { OpenEyeIcon } from '@app-studio/web';
import { CloseEyeIcon } from '@app-studio/web';

<Password
  visibleIcon={<OpenEyeIcon size={14} />}
  hiddenIcon={<CloseEyeIcon size={14} />}
/>;
```

### **Error**

“**_error_**” if true, indicates that the text field value failed the validation criteria.

```tsx
import { Vertical } from "app-studio";
import { Button } from '@app-studio/web';
import { OpenEyeIcon } from '@app-studio/web';
import { CloseEyeIcon } from '@app-studio/web';

<Password
  placeholder="Password"
  colorScheme="theme-secondary"
  visibleIcon={<OpenEyeIcon size={14} />}
  hiddenIcon={<CloseEyeIcon size={14} />}
  error
/>;
```

### **HelperText**

“**_helperText_**” is a string text used to inform the user that the content of the field is invalid.

```tsx
import { Vertical } from "app-studio";
import { Button } from '@app-studio/web';
import { OpenEyeIcon } from '@app-studio/web';
import { CloseEyeIcon } from '@app-studio/web';

<Password
  placeholder="Password"
  helperText="Incorrect password"
  visibleIcon={<OpenEyeIcon size={14} />}
  hiddenIcon={<CloseEyeIcon size={14} />}
  error
/>;
```

## **Default Values**

```tsx
const Shapes: Record<Shape, number | string> = {
  default: "6px 6px 0 0",
  sharp: 0,
  rounded: 4,
  pillShaped: 24,
};
```

## Types

```tsx
type Variant = "outline" | "default" | "none";
```

```tsx
type Shape = "default" | "sharp" | "rounded" | "pillShaped";
```

```tsx
type Size = "xs" | "sm" | "md" | "lg" | "xl";
```

```tsx
type TextFieldStyles = {
  container?: CSSProperties;
  field?: CSSProperties;
  label?: CSSProperties;
  helperText?: CSSProperties;
  text?: CSSProperties;
};
```