Input Group

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Input Group — it needs no JavaScript, so the classes below are the whole story.

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

Root class input-group, with 3 modifiers:

• .input-group
• .input-group-btn
• .input-group-end
• .input-group-start

React

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

npm i @wizeworks/silicaui-react

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

const AtIcon = () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <circle cx="12" cy="12" r="4" />
        <path d="M16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-5.5 8.28" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
);

export function InputGroupDemo() {
    return (
        <Section title="Custom affix composition">
            <p className="max-w-sm text-xs opacity-60">
                The primitive behind PasswordInput/SearchInput/PhoneInput — compose your
                own leading/trailing icon or text around any Input.
            </p>
            <Stack className="max-w-sm">
                <InputGroup>
                    <InputGroupAddon placement="start">
                        <AtIcon />
                    </InputGroupAddon>
                    <Input className="input-affix-start" placeholder="username" />
                </InputGroup>
            </Stack>
        </Section>
    );
}

Vanilla — node tree to HTML

InputGroup — lowers to <div>, holding its children. 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("InputGroup", "input-group", { /* 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 "input-group input-group-primary" rather than passing a colour as a prop.

Takes children

yes

Hydrated by

nothing — this one is static markup