Password Input

An Input with a leading lock affix slot reserved and a trailing show/hide toggle.

Colors

Sizes

Controlled

7 characters

Using Password Input

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { PasswordInput } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
color	PasswordInputColor	no	Accent color; maps to input-<color> (border + focus ring).
size	PasswordInputSize	no	Default md. Matches same-size Button/Input heights.
defaultVisible	boolean	no	Reveal the password on initial render. Default false.
toggleAriaLabel	{ show: string; hide: string }	no	Accessible label for the show/hide toggle. Default "Show password" / "Hide password".
className	string	no	Classes for the component's OUTER box — the input-group that lays out the field and its affixes.
inputClassName	string	no	Classes for the <input> itself, for the rarer case of styling the field.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { useState } from "react";
import { PasswordInput } from "@wizeworks/silicaui-react";
import { Section, Stack } from "../lib/Section";
import { SIZES } from "../lib/data";

export function PasswordInputDemo() {
    const [value, setValue] = useState("hunter2");

    return (
        <>
            <Section title="Colors">
                <Stack className="max-w-sm">
                    <PasswordInput placeholder="Default" />
                    <PasswordInput color="primary" placeholder="Primary" />
                    <PasswordInput color="error" placeholder="Error" defaultValue="tooshort" />
                    <PasswordInput disabled placeholder="Disabled" defaultValue="secret123" />
                </Stack>
            </Section>

            <Section title="Sizes">
                <Stack className="max-w-sm">
                    {SIZES.map((size) => (
                        <PasswordInput key={size} size={size} placeholder={size} />
                    ))}
                </Stack>
            </Section>

            <Section title="Controlled">
                <Stack className="max-w-sm">
                    <PasswordInput
                        value={value}
                        onChange={(e) => setValue(e.target.value)}
                        placeholder="Password"
                    />
                    <p className="text-xs opacity-60">{value.length} characters</p>
                </Stack>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

The framework-neutral form of Password Input. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("PasswordInput", undefined, { /* props */ });
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "… …-primary" rather than passing a colour as a prop.

Takes children: no
Hydrated by: nothing — this one is static markup

The full API for Password Input, on every path, is available through the Silica MCP server.