Password Input React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import PasswordInput from "./PasswordInput";

export default function Example() {
  return (
    <PasswordInput
      defaultValue={"studio-example"}
      label={"Password"}
      placeholder={"Enter your password"}
      showLabel={"Show password"}
      hideLabel={"Hide password"}
      strength={3}
      strengthLabel={"Example strength indicator"}
      color={"#baafce"}
      disabled={false}
      required={false}
      autoComplete={"new-password"}
    />
  );
}

Using Password Input

Connect value and onValueChange to your form state, or use defaultValue for local state. Set name for form submission and choose the appropriate autocomplete hint.

The component only displays the supplied strength and strengthLabel. Calculate any strength assessment in your application; the reveal button changes visibility without changing the stored value.

Props

Name	Type	Required	Default	Description
value	string	No	undefined	Controlled password value.
defaultValue	string	No	""	Initial uncontrolled value.
onValueChange	function	No	undefined	Receives the entered value.
label	string	No	"Password"	Visible input label.
placeholder	string	No	""	Input placeholder.
showLabel	string	No	"Show password"	Hidden-state reveal button label.
hideLabel	string	No	"Hide password"	Visible-state reveal button label.
strength	number	No	undefined	Optional caller-calculated strength display from zero to four.
strengthLabel	string	No	undefined	Optional explanation associated with the input.
color	string	No	"#baafce"	Accent and strength colour.
disabled	boolean	No	false	Disable input and reveal control.
required	boolean	No	false	Mark the native input as required.
name	string	No	undefined	Native form field name.
autoComplete	string	No	"current-password"	Native autocomplete hint.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.

Related components

Tag Composer

Inputs

Editable tags collect inside a softly framed input with individual remove controls.

Search Capsule

Inputs

A recessed search field expands into a polished capsule as you type.

Constellation Rating

Inputs

Faceted stars lift into selection with a small marker beneath the chosen rating.

Toggle Board

Inputs

A bank of tactile keys holds independent selections with illuminated indicators.

Category: Inputs

Inputs React Animation