Forms

InputGroup

The input shell with add-ons, or a prompt box with toolbars.

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

Prefix and suffix, search, and a prompt

Docs address

https://.fenly.io

⌘K

Ask Pluto

import { Button, Field, InputGroup, Kbd } from "@flinbu/seed";
import { ArrowUp, Paperclip, Search } from "lucide-react";

<div className="flex w-full max-w-md flex-col gap-base">
  <Field label="Docs address"><InputGroup start="https://" end=".fenly.io" defaultValue="acme" /></Field>
  <Field label="Search"><InputGroup start={<Search size={16} />} end={<Kbd>⌘K</Kbd>} placeholder="Tokens, components…" /></Field>
  <Field label="Ask Pluto"><InputGroup multiline placeholder="Which text colors fail contrast in Light?"
    bottom={<><Button variant="ghost" size="sm" icon={<Paperclip />} aria-label="Attach a file" /><Button size="sm" icon={<ArrowUp />} aria-label="Send" /></>} /></Field>
</div>

Use it for

Prefixes and units, a search with a shortcut, a chat composer.

Props

Prop	Type	Default	Description
`start / end`	`ReactNode`	–	Text, an icon, a small Button or a Kbd.
`multiline`	`boolean`	–	A textarea with top and bottom bars.
`top / bottom`	`ReactNode`	–	Bars around the multiline field.
`size`	`'sm''md''lg'`	`'md'`	Same heights as Input.

Accessibility

Inside Field the input gets its label, hint and error; add-on text is not part of the value.