File Input

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 File Input — it needs no JavaScript, so the classes below are the whole story.

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

Root class file-input, with 5 modifiers:

• .file-input
• .file-input-lg
• .file-input-md
• .file-input-sm
• .file-input-xl
• .file-input-xs

React

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

npm i @wizeworks/silicaui-react

import { FileInput } 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 { FileInput } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

export function FileInputDemo() {
    const [name, setName] = useState<string | null>(null);

    return (
        <>
            <Section title="Sizes">
                <Row>
                    <FileInput size="sm" />
                    <FileInput />
                    <FileInput size="lg" />
                </Row>
            </Section>

            <Section title="Real use · avatar upload">
                <div className="flex flex-col gap-2">
                    <FileInput
                        accept="image/*"
                        onChange={(e) => setName(e.target.files?.[0]?.name ?? null)}
                    />
                    <p className="text-xs opacity-60">
                        {name ? `Selected: ${name}` : "PNG or JPG, up to 5MB."}
                    </p>
                </div>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

FileInput — an <input type="file">. type is fixed, so it isn't reachable through Input's props.type the way the other field modes are. 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("FileInput", "file-input", { /* 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 "file-input file-input-primary" rather than passing a colour as a prop.

Takes children

no

Hydrated by

nothing — this one is static markup