Number Field

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 Number Field is styled but inert: its behavior comes from number-field. For that behavior with no framework, use the node-tree path below.

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

Root class number-field, with 5 modifiers:

• .number-field
• .number-field-button
• .number-field-decrement
• .number-field-group
• .number-field-increment
• .number-field-input

React

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

npm i @wizeworks/silicaui-react

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

Props

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.

import { useState } from "react";
import { NumberField } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function NumberFieldDemo() {
    const [qty, setQty] = useState<number | null>(2);

    return (
        <>
            <Section title="Real use · cart quantity">
                <Row>
                    <NumberField
                        label="Quantity"
                        value={qty}
                        onValueChange={setQty}
                        min={1}
                        max={10}
                    />
                    <span className="text-sm opacity-60">{qty ?? 0} in cart</span>
                </Row>
            </Section>

            <Section title="Step + bounds">
                <Row>
                    <NumberField label="Percent" defaultValue={50} min={0} max={100} step={5} />
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

number-field — native <input type=number>, no Base-UI-only CSS selectors to work around (confirmed via the CSS check this pass). 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("NumberField", "number-field", { /* props */ }, [/* children */]);
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 "number-field number-field-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

number-field

Load @wizeworks/silicaui-behaviors on the page or this markup renders correctly and does nothing.