Skip to content
Altitude Standalone Components

Text Input Field

Text Input Field Component

The Text Input Field component provides a complete form field for single-line text input with built-in label, validation, error handling, and accessibility support.

Example

Enter your full name as it appears on your ID

Please enter a valid email address

Usage

import TextInputField from "@altitude/ui/react/components/fields/text-input-field";


export default function SignupForm() {
  return (
    <form>
      <TextInputField
        id="email"
        name="email"
        label="Email Address"
        helperText="We'll never share your email"
        placeholder="example@email.com"
        required={true}
      />


      <TextInputField
        id="password"
        name="password"
        label="Password"
        type="password"
        helperText="At least 8 characters"
        required={true}
      />


      {/* More form fields */}
      <button type="submit">Sign Up</button>
    </form>
  );
}

Props

PropTypeRequiredDescription
idstringNoHTML ID for the field
namestringNoHTML name attribute for the field
labelstringNoLabel text for the field
helperTextstringNoHelper text displayed below the field
errorMessagestringNoError message displayed when aria-invalid is true
placeholderstringNoPlaceholder text for the input
requiredbooleanNoWhether the field is required (default: false)
aria-invalidbooleanNoWhether the field has an error (default: false)
disabledbooleanNoWhether the field is disabled (default: false)
maxlengthnumberNoMaximum character count for the field
typestringNoInput type (e.g., “text”, “email”, “password”)

Additional HTML input attributes can also be passed and will be forwarded to the underlying input element.

Implementation Details

The Text Input Field component combines an input wrapper and a text input component:

  • Uses FieldWrapper to handle labels, error states, and helper text
  • Uses the base TextInput UI component for the actual input element
  • Automatically handles validation states and error messaging