Components
Input
Single-line text entry, with sizes and states.
Default
<Input placeholder="Search notes…" />Disabled
With label
States
Lowercase letters and dashes only.
{/* invalid */}
<Label htmlFor="slug">Note slug</Label>
<Input id="slug" aria-invalid defaultValue="Düsseldorf Notes!" />
<p className="text-xs text-error">Lowercase letters and dashes only.</p>
{/* required */}
<Label htmlFor="workspace">
Workspace name <span className="text-error">*</span>
</Label>
<Input id="workspace" required placeholder="buena mono" />
{/* file */}
<Label htmlFor="cover">Cover image</Label>
<Input id="cover" type="file" />Prefix & suffix
https:// .io
Prefix and suffix
@
Rounded prefix suffix
$ USD
Rounded without styling — affixes sit inline, no addon background
{/* Prefix and suffix */}
<div class="flex h-9 w-full items-stretch overflow-hidden rounded-md border border-input">
<span class="flex items-center bg-bg-surface px-3 text-sm text-text-tertiary">https://</span>
<input class="min-w-0 flex-1 bg-transparent px-3 text-sm outline-none" />
<span class="flex items-center bg-bg-surface px-3 text-sm text-text-tertiary">.buenalabs.io</span>
</div>Search & Command-K
Search — Escape clears the field
⌘ K
Command-K — shows ⌘ K, then Esc once dirty
Error
Only letters, numbers, and dashes are allowed.
Error — the message renders below the field with the invalid ring.
Form layouts
A Field Group / Form: paired fields (Inline via horizontal Label + Input), Grid columns, a Badge on the label, an Input Group prefix, and a Button Group search row.
{/* Grid */}
<div class="grid grid-cols-2 gap-4">…</div>
{/* Input Group */}
<ButtonGroup>
<ButtonGroupText>https://</ButtonGroupText>
<Input placeholder="notes.buenalabs.io" />
</ButtonGroup>
{/* Button Group */}
<ButtonGroup>
<Input placeholder="Search notes" />
<Button variant="outline">Search</Button>
</ButtonGroup>Markdown for agents: /design/input.md · spec: /design.md