Text Input

The TextInput component handles single-line user input, with options for a label, caption, prefix/suffix affixes, validation states, and an info tooltip.

Variations

Disabled

Read only

Optional

By default a labelled input shows a required * marker. Pass optional to remove it and mark the field as optional.

Theme

The TextInput component accepts a theme prop, which defines the visual state of the input: success, warning, or danger.

When an error occurs, pass the message to the error prop — this automatically applies the danger theme. For warnings, pass the warning prop, which applies the warning theme.

Size

The TextInput component accepts a size prop, which defines the overall size of the input field. Available options are md (medium, default) and sm (small).

Prefix & suffix

The TextInput component supports prefix and suffix props, which allow adding content before or after the input field.

tooltipContent sets the content of the label’s info tooltip. tooltipProps passes additional props to the tooltip.

Orientation

The TextInput component accepts an optional orientation prop, which defines the layout direction of the input and its label. Available options are horizontal and vertical (default).

Installation

import { TextInput } from "@harnessio/ui/components";

<TextInput
  label="Success Input"
  id="someinput"
  value="input with value"
  placeholder="Enter the value"
  theme="success"
/>;

Anatomy

TextInput composes a label, the input field, and a caption inside a control group.

The label renders above (or beside, when orientation="horizontal") the input. By default it shows a required * marker; optional removes it. tooltipContent adds an info icon with a tooltip next to the label, and labelSuffix adds a custom element on the right of the label.
The input accepts optional prefix and suffix content rendered inline before and after the text.
Below the input, a caption area shows the error message (in the danger theme), then the warning message (in the warning theme), otherwise the plain caption.
Every input gets an id; if you don’t provide one it’s generated automatically and used to associate the label.

Best practices

Always provide a label (or an aria-label) so the field’s purpose is clear.
Use error for validation messages — it both shows the message and switches the field to the danger theme, so you don’t need to set theme yourself.
Use caption for persistent helper text and reserve error/warning for state-driven messages.
Add optional to fields that aren’t required so the required * marker reflects reality.

Don’t

Don’t use TextInput for numeric or search entry — the type prop excludes 'number' and 'search' (among others); use the dedicated components instead.
Don’t set theme="danger" on its own to signal an error without an error message; pair them so users see what’s wrong.

Content

Keep labels short and noun-based; put format hints in the caption.
Write error messages as a clear, actionable statement of what to fix.

Accessibility

Labeling

The label is associated with the input through a shared id (auto-generated when omitted), so clicking the label focuses the field.
When there’s no visible label, provide an aria-label.
tooltipContent surfaces supplementary help through an info button beside the label.

Focus & states

disabled removes the field from the tab order; readOnly keeps it focusable but non-editable.
error applies the danger theme and renders the message beneath the field so the validation state is both visible and adjacent to the input.

Properties

Prop	Required	Default	Type
label	false		string
caption	false		string
error	false		string
warning	false		string
optional	false	false	boolean
theme	false	'default'	'default' \| 'success' \| 'danger' \| 'warning'
size	false	'md'	'md' \| 'sm'
orientation	false	'vertical'	'vertical' \| 'horizontal'
type	false	'text'	string
prefix	false		ReactNode
suffix	false		ReactNode
value	false		string
defaultValue	false		string
onChange	false		React.ChangeEventHandler<HTMLInputElement>
placeholder	false		string
readOnly	false	false	boolean
disabled	false	false	boolean
id	false		string
tooltipContent	false		Exclude<ReactNode, boolean \| null \| undefined>
tooltipProps	false		IconWithTooltipProps
labelSuffix	false		ReactNode
className	false		string
inputContainerClassName	false		string
wrapperClassName	false		string