Forms

Input

A single line of text: names, emails, search, numbers.

import { Input } from "@flinbu/seed";

Sizes

import { Input } from "@flinbu/seed";

<div className="flex w-full min-w-72 max-w-sm flex-col gap-sm">
  <Input size="sm" placeholder="Small" />
  <Input placeholder="Medium" />
  <Input size="lg" placeholder="Large" />
</div>

Icons, invalid and disabled

import { Input } from "@flinbu/seed";
import { Search, Mail } from "lucide-react";

<div className="flex w-full min-w-72 max-w-sm flex-col gap-sm">
  <Input leftIcon={<Search />} placeholder="Search tokens" />
  <Input leftIcon={<Mail />} type="email" defaultValue="ana@flinbu.co" invalid />
  <Input placeholder="Disabled" disabled />
</div>

Use it for

Short free text. Wrap it in Field for a label, hint and error.

Use something else for

More than one line: use Textarea.

Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	sm 32px, md 40px, lg 48px.
`invalid`	`boolean`	`none`	Error border and aria-invalid. Field sets it from error.
`leftIcon`	`IconProp`	`none`	Icon inside the start of the field. An element like <Search /> (works in server components) or, in client components, the component itself.
`rightIcon`	`IconProp \| ReactNode`	`none`	An icon, or a small ghost Button for an action (clear, show password).
`…`	`InputHTMLAttributes`	`none`	Every native input prop is passed to the <input>; ref points to it.
`className`	`string`	`none`	Extra classes. They win over Seed's, so you can adjust one thing without forking.

Accessibility

Inside Field it gets its id, aria-describedby and aria-invalid automatically.
Placeholder text is never the label.