TextInput

InstallationCopy Anchor Link

npx vayu-ui-cli@latest add text-input

UsageCopy Anchor Link

TextInput and Select share field heights: sm is 36px, md is 44px, and lg is 52px at the default root font size. Set size and disabled on the root. Disabled fields share the same muted background, opacity, and border behavior; clear and password visibility actions are disabled too.

AnatomyCopy Anchor Link

import { TextInput } from 'vayu-ui';

<TextInput>
  <TextInput.Label />
  <TextInput.Field>
    <TextInput.Icon />
    <TextInput.Input /> {/* Standard Input */}
    <TextInput.PasswordInput /> {/* OR Password Input */}
    <TextInput.SearchInput /> {/* OR Search Input */}
    <TextInput.NumberInput /> {/* OR Number Input */}
    <TextInput.ClearButton />
    <TextInput.LoadingSpinner />
  </TextInput.Field>
  <TextInput.Description />
  <TextInput.ErrorMessage />
  <TextInput.WarningMessage />
  <TextInput.SuccessMessage />
  <TextInput.CharacterCount />
</TextInput>;

AccessibilityCopy Anchor Link

• Keyboard support: Full keyboard navigation. Input fields are accessible via Tab. The internal clear button and password toggle button can be fully operated using Space or Enter.
• ARIA attributes: Uses aria-invalid for validation states. The label, description, and error messages are programmatically tied to the inputs using aria-labelledby and aria-describedby, correctly mapping compound components behind the scenes.
• Focus behavior: Clear visual focus indicates the active field based on the internal Field container, not just the Input.

Screen reader behaviorCopy Anchor Link

Screen readers will announce the input's label, its current value or a placeholder, any help descriptions, and the validation state error message. For example, a missing required field might be announced as "Email, required, edit text, invalid entry, Email is required."

Component Folder StructureCopy Anchor Link

packages/ui/src/components/ui/TextInput/
├── Input.tsx
├── README.md
├── TextInput.tsx
├── TextInputCharacterCount.tsx
├── TextInputClearButton.tsx
├── TextInputDescription.tsx
├── TextInputErrorMessage.tsx
├── TextInputField.tsx
├── TextInputIcon.tsx
├── TextInputLabel.tsx
├── TextInputLoadingSpinner.tsx
├── TextInputNumberInput.tsx
├── TextInputPasswordInput.tsx
├── TextInputSearchInput.tsx
├── TextInputSuccessMessage.tsx
├── TextInputWarningMessage.tsx
├── index.ts
└── types.ts

PropsCopy Anchor Link

TextInputCopy Anchor Link

TextInput.LabelCopy Anchor Link

TextInput.InputCopy Anchor Link

TextInput.PasswordInputCopy Anchor Link

TextInput.NumberInputCopy Anchor Link

TextInput.CharacterCountCopy Anchor Link

Formatted numbersCopy Anchor Link

Use format on TextInput.NumberInput to group digits with commas. Leading zeros normalize (01 → 1, 00 → 0) and 1212 displays as 1,212. The root onChange receives the unformatted string, so validation and submission use "1212". Empty input stays empty. Decimal fractions and large integers keep their precision; min and max apply on blur.

<TextInput value={amount} onChange={setAmount}>
  <TextInput.Label>Amount</TextInput.Label>
  <TextInput.Field>
    <TextInput.NumberInput format numberType="natural" />
  </TextInput.Field>
</TextInput>

Initialize amount with useState(''). Leave format false for ungrouped numeric entry. This is numeric input, so use a regular TextInput.Input for identifiers where leading zeros must be preserved.