TextInput

TextInput

Category: Forms & inputs

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

Install: @helix-ui/core

import { TextInput } from '@helix-ui/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.
• Set type to match what the field holds. On iOS and Android it is the only thing that decides which keyboard opens: email shows the @ and .com keys and stops the first letter being capitalised, tel opens the dial pad, url shows / and .com, and search puts Search on the action key. A field left at the default text gets plain QWERTY, which is why an email field is the classic mobile form failure.
• Add autoComplete on anything an OS keychain should fill — email, username, current-password, new-password, one-time-code. iOS Keychain, Android Autofill and the desktop password managers all key off those exact tokens and offer nothing without them.
• type="search" also makes Escape clear the field in Safari and Chrome. That is usually welcome, but inside a dialog it competes with Escape-to-close, so prefer type="text" with enterKeyHint=\"search\" for a search box in an overlay.

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 helix-ui prompt DSL and integrations like Cursor / Claude Code.

simple text field

“email input with placeholder”

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

with leading icon

“search input with magnifying glass prefix”

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

Related

• Textarea
• InputGroup
• Field