TextField

A single-line text input with an icon slot and a clear button. For any short-answer form field.

Visible to everyone on your team.
State messages disclose through Collapse - they ease in, never jump the layout.

Install TextField

1. New project? One command installs the package and wires everything - see Installation:

bash
pnpm dlx zyncat-ui init

2. Import the component - it loads its own stylesheet:

tsx
import { TextField } from '@zyncat/ui/text-field';

Usage

tsx
import { TextField } from '@zyncat/ui/text-field';
 
<TextField label="Search projects" leadingIcon={<SearchIcon />} clearable />

Compose TextField in your application. No Tailwind or external styling library is required; every value resolves from Zyncat UI's token vocabulary.

TextField props

TextField

PropTypeDefaultDescription
...htmlAttributesHTMLAttributes—Standard <input> attributes (name, autoComplete, maxLength, aria-*, ...) forwarded to the input.
leadingIconReactNode—Leading icon - your own icon node (sized to the control). Decorative.
clearableboolean—Show a clear button when there's a value.
size'sm' | 'md' | 'lg'—Control height: sm 28px - md 32px (default) - lg 37px.
classNamestring—Extra class(es) merged onto the field root.
styleCSSProperties—Inline styles merged onto the field root.
type'text' | 'search' | 'email' | 'url' | 'password'—Available text like types
warningReactNode—Warning message - amber state. Loses to `error`; wins over `success`/`helper`.
successReactNode—Success message - green state. Loses to `error`/`warning`; wins over `helper`.
idstring—Field id, ties the label to the control.
requiredboolean—Mark the control required - reaches the native element and shows a danger `*` after the label.
optionalboolean—Show a muted "(optional)" after the label.
labelReactNode—Label text (sentence case).
helperReactNode—Neutral helper text - shown when there's no validation message.
errorReactNode—Error message - sets the error state (border + icon + colour). Wins over warning/success/helper.

Frequently asked questions

Set clearable - a small button appears once the field has a value and isn't disabled or readOnly. Clicking it resets the native input through a real dispatched input event, so a controlled onChange still fires, then returns focus to the field.

Pass error as the message text - the border and message icon switch to the danger color and the message itself slides open under the field through a Collapse instead of jumping into place. error wins over warning, warning wins over success, and success wins over the neutral helper text, so only one shows at a time.

Yes - leadingIcon takes any node and pins it to the left edge, sized to match the control. There's no separate trailing-icon prop, since that slot is reserved for the built-in clear button when clearable is set.

Yes - type accepts text (default), search, email, url or password, and it renders straight through to a native <input type="...">, so browser autofill, validation and password managers behave exactly as they do on plain HTML.

Set in Geist & Newsreader — animated by the house engineZyncat UI · Rev 0.11 · MIT · Built by Tabsir Ahammed · Source on GitHub