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 <input> 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 design page.

import React from "react";
import { Password } from "cherry-styled-components";

export default function Page() {
  return <Password $label="Password" $fullWidth id="password" />;
}

With sizes and validation states:

<Password $size="big" $fullWidth />
<Password $error $fullWidth />

Properties