Skip to content

Foundations

Text Field

Borderless TextField, SearchField with clear and TextArea, with label, description and error wiring.

2 variantsMIT

Preview

Shown in traces and approvals.

Installation

Copies the component into components/ui and installs its dependencies and theme tokens.

pnpm dlx shadcn@latest add https://tuffui.com/r/text-field.json

Usage

Pass your own data and wire the callbacks to your agent runtime.

import { SearchField, TextArea, TextField } from "@/components/ui/text-field";

<SearchField value={query} onChange={(e) => setQuery(e.target.value)} onClear={() => setQuery("")} />
<TextField label="Agent name" description="Shown in traces." error={nameError} />
<TextArea label="Instructions" rows={4} />

Props

PropTypeDefaultDescription
labelReactNode—Visible label, linked to the control.
descriptionReactNode—Help text, linked with aria-describedby.
errorReactNode—Error text; marks the control aria-invalid and replaces the description.
SearchField.onClear() => void—Shows a clear button while there is text.
...rest<input> / <textarea> props—Passed to the native control.