Input

Text input with optional adornment slots. Extends the native input API — omits the numeric size attr and replaces it with a token-based size prop.

Sizes

import { Input } from "@brijbyte/agentic-ui/input";

import "@brijbyte/agentic-ui/input.css";

export default function SizesDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: 280 }}>
      <Input size="sm" placeholder="Small — 26 px tall" />
      <Input size="md" placeholder="Medium — 30 px tall (default)" />
      <Input size="lg" placeholder="Large — 36 px tall" />
    </div>
  );
}

With adornments

✓

import { Input } from "@brijbyte/agentic-ui/input";

import "@brijbyte/agentic-ui/input.css";

function SearchIcon() {
  return (
    <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
      <circle cx="5.5" cy="5.5" r="4" stroke="currentColor" strokeWidth="1.4" />
      <path d="M8.5 8.5L11 11" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" />
    </svg>
  );
}

export default function AdornmentsDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: 280 }}>
      <Input placeholder="Search…" leftAdornment={<SearchIcon />} />
      <Input
        defaultValue="brijesh@example.com"
        rightAdornment={<span style={{ fontSize: "var(--font-size-xs)", color: "var(--color-success-text)" }}>✓</span>}
      />
    </div>
  );
}

States

import { Input } from "@brijbyte/agentic-ui/input";

import "@brijbyte/agentic-ui/input.css";

export default function StatesDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "var(--space-3)", width: 280 }}>
      <Input disabled placeholder="Disabled" />
      <Input invalid defaultValue="bad-value" />
    </div>
  );
}

API Reference

Input

base-ui docs ↗

Text input with optional left and right adornment slots. Extends the
native <input> API — replaces the numeric size attribute with a
token-based size prop.

Prop	Type	Default
size	`"sm" \| "md" \| "lg"`	`md`
Visual size. Maps to height + font-size design tokens. Default: `"md"`.
leftAdornment	`ReactNode`	—
Icon or element rendered before the input text.
rightAdornment	`ReactNode`	—
Icon or element rendered after the input text.
invalid	`boolean`	—
Applies error styling and sets `aria-invalid`.

CSS Class Names

Available as keys on the InputStyles object. Each key maps to a hashed CSS module class name at runtime.

adornmentadornment-leftadornment-righthas-left-iconhas-right-iconinputWrapperrootsize-lgsize-mdsize-smwrapper