TextField

Patterns

Search Row

When to use:

• a field needs a trailing submit or search action

Composition notes:

• keep the input first and the action second
• match action size to the field size

Trade-offs:

• compact and practical
• adds more horizontal density than a plain field

import type { CSSProperties, FormEvent } from 'react';
import { Button, Icon, IconButton, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { SearchIcon, XIcon } from '@vega-ui/icons';
import { useRef, useState } from 'react';
import './examples.css';

export default function SearchWithClearAndSubmit() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [query, setQuery] = useState('');
  const [searched, setSearched] = useState('');

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {

Counter Or Status Suffix

When to use:

• the current value needs lightweight inline feedback

Composition notes:

• keep suffix text short
• avoid pushing the input too narrow

Trade-offs:

• immediate feedback
• can reduce usable input width

import { Label, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { useId, useState } from 'react';

const MAX_LENGTH = 60;

export default function CharacterCounterSuffix() {
  const id = useId();
  const counterId = `${id}-counter`;
  const [title, setTitle] = useState('Q3 roadmap review');
  const remaining = MAX_LENGTH - title.length;

  return (

Prefix And Suffix

When to use:

• fixed text belongs to the value, such as a protocol, a domain, or a unit

Composition notes:

• keep affixes out of the value and hide them from screen readers when the label or hint already says it
• let the input shrink (minWidth: 0) while affixes keep their width

Trade-offs:

• efficient for dense controls
• easier to overload than a plain field

import { HelperText, Label, Text, TextField, TextFieldInput } from '@vega-ui/react';
import { useId, useState } from 'react';

const affixStyle = {
  flexShrink: 0,
  whiteSpace: 'nowrap',
  color: 'var(--label-secondary)',
} as const;

export default function SubdomainPrefixSuffix() {
  const id = useId();
  const hintId = `${id}-hint`;

Comparison

Quick Decision Rule

Use TextField for single-line text entry, especially when the field needs prefix or suffix composition. Use TextArea for multiline input and specialized fields when masking or advanced behavior is required.

TextField vs TextArea

Use TextField when:

• the value is single-line

Use TextArea when:

• the content is intentionally multiline

TextField vs PasswordField

Use TextField when:

• the input is generic text

Use PasswordField when:

• the field needs password masking and a visibility toggle

TextField vs NumberField

Use TextField when:

• the value is free-form text, even if it includes digits

Use NumberField when:

• stepping, bounds, or numeric constraints matter

TextField vs PhoneField

Use TextField when:

• the value is generic text and does not need country-aware phone behavior

Use PhoneField when:

• country selection, formatting, and canonical phone parsing belong to the same field contract

Choose This Component When

• the control is single-line
• optional prefix or suffix composition is useful
• native input semantics are sufficient
• the field should stay generic rather than specialized

Do Not Choose This Component When

• the field is multiline
• the interaction needs password, numeric, or segmented-code behavior

Troubleshooting

The Field Renders But Form Submission Misses The Value

Symptom

The wrapper is visible, but the submitted form does not include the expected value.

Likely Cause

name or other form props were placed on TextField instead of TextFieldInput.

How To Verify

• inspect the rendered markup
• confirm the native input has the expected form attributes

Fix

Put form attributes on TextFieldInput.

Error Styling Does Not Show Up

Symptom

The input is invalid, but the field outline still looks neutral.

Likely Cause

The wrapper did not receive error.

How To Verify

• inspect the TextField props
• confirm data-error='true' appears on the wrapper

Fix

Set error on TextField and keep invalid semantics on the input if needed.

Prefix Or Suffix Content Makes The Field Hard To Use

Symptom

The input area feels cramped or focus flow becomes awkward.

Likely Cause

Too many controls were added around the input.

How To Verify

• remove extra children temporarily
• compare the interaction against the plain field

Fix

Reduce the composition to one clear input plus only the necessary adjacent actions.