Validator

Recolors its child control by validity.

Real use · native validity styling (type to see it flip)

Enter a valid email address.

Must be at least 8 characters.

Using Validator

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.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path ships no JavaScript, so a component that needs interaction is styled but inert.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class validator, with 1 modifier:

.validator
.validator-hint

React

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

npm i @wizeworks/silicaui-react

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

Props

Prop	Type	Required	Description
children	React.ReactElement<{ className?: string }>	yes	A single form control to apply validity-driven coloring to.

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 { Validator, ValidatorHint, Input } from "@wizeworks/silicaui-react";
import { Section, Stack } from "../lib/Section";

export function ValidatorDemo() {
    return (
        <Section title="Real use · native validity styling (type to see it flip)">
            <Stack className="max-w-sm">
                <Validator>
                    <Input required type="email" placeholder="you@example.com" />
                </Validator>
                <ValidatorHint>Enter a valid email address.</ValidatorHint>

                <Validator>
                    <Input required minLength={8} type="password" placeholder="Password (min 8 chars)" />
                </Validator>
                <ValidatorHint>Must be at least 8 characters.</ValidatorHint>
            </Stack>
        </Section>
    );
}

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