TextInput

TextInput

<TextInput label="Email" type="email" placeholder="[email protected]" isRequired />
<TextInput label="Search" prefix={<SearchIcon />} />
<TextInput label="URL" prefix="https://" suffix=".com" />

Install: @helixui/core

import { TextInput } from '@helixui/core'

status: stable · since: 0.1.0

Tags: input, text, single-line

Live playground

Open the full editor or source on GitHub.

Anatomy

Label
[ prefix | text input | suffix ]
Help / error

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — fills width, ~36-44px tall
• stackable — true
• fullBleed — false

Visual

A single-line input with built-in label, description, error, and prefix/suffix slots for icons or units.

Props

Name	Type	Default	Description
label	ReactNode	—	Visible label rendered above the input.
description	ReactNode	—	Helper text below the input.
errorMessage	string | (v: ValidationResult) => string	—	Error message below the input. Can be a function for built-in validate results.
placeholder	string	—	Placeholder text.
size	'sm' | 'md' | 'lg'	md	Control height.
prefix	ReactNode	—	Inline content before the input — icon or static label.
suffix	ReactNode	—	Inline content after the input.
isRequired	boolean	false	Marks the field required for validation.
isInvalid	boolean	false	Forces the invalid state.
isDisabled	boolean	false	Disables the input.
...rest	TextFieldProps from react-aria-components	—	Forwarded — value/defaultValue/onChange/onBlur/etc.

Tokens used

color.bg.surface.default, color.bg.surface.muted, color.border.default, color.border.focus, color.border.danger, color.text.primary, color.text.secondary, color.text.muted, color.text.action.danger, radius.md, space.2, space.3, font.family.sans, font.size.sm, font.size.md, font.size.lg, font.weight.medium

Accessibility

Notes

• Built on react-aria-components TextField — keyboard, screen-reader, and validation are handled.
• Pass label instead of relying on placeholder for accessibility.

Composes with

Component	Relation	Note
Form	parent	Inside Form.
InputGroup	parent	Compose with Buttons via InputGroup.
NumberField	alternative	NumberField for numbers.
Textarea	alternative	Textarea for multi-line.
Field	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

simple text field

“email input with placeholder”

<TextInput label="Email" placeholder="[email protected]" value={email} onChange={setEmail} />

with leading icon

“search input with magnifying glass prefix”

<TextInput label="Search" prefix={<SearchIcon />} value={q} onChange={setQ} />

Related

• Textarea
• InputGroup
• Field