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>
  );
}