# Password
> Cherry Password component - a password input with a built-in show/hide reveal toggle.
Source: https://cherry.al/code/password
> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).
# Password
The Password component wraps the Cherry Input with `type="password"` and adds a show/hide reveal toggle pinned inside the field.
It accepts every Input property except `type`, `$icon`, and `$iconPosition`: `type` is owned by the component to flip between masked and plain text, and the icon slot is reserved for the reveal button. Small fields automatically get a matching small reveal button.
Keep in mind that the `` element inherently includes native browser properties like `onChange`. Cherry UI components introduce custom properties that always begin with a `$` to distinguish them from native props.
For design guidelines and all interactive states, see the [Inputs](/inputs) design page.
```jsx
import React from "react";
import { Password } from "cherry-styled-components";
export default function Page() {
return ;
}
```
With sizes and validation states:
```html
```
## Properties
Label text displayed above the input.
Size of the input. The `small` size also shrinks the reveal button.
Shows error state styling on the field and the reveal button.
Shows success state styling.
Makes the input span the full width of its container.
Class name applied to the wrapper element around the input, for restyling from the outside.
The reveal toggle manages `aria-pressed` and swaps its accessible label
between "Show password" and "Hide password" automatically.