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. The reveal button adapts its size to the field's $size automatically.

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