Skip to content
Altitude Standalone Components

Field Wrapper

Field Wrapper Component

The Field Wrapper component provides a consistent container for form fields with built-in support for labels, helper text, error messages, character counting, and accessibility attributes.

Example

We'll never share your email

This username is already taken

Tell us about yourself

Usage

The Field Wrapper is typically used by form field components internally, but you can also use it directly to wrap custom inputs:

import FieldWrapper from "@altitude/ui/react/components/field-wrapper";
import TextInput from "@altitude/ui/react/ui/text-input";


export default function CustomField() {
  return (
    <FieldWrapper
      id="email"
      name="email"
      label="Email Address"
      helperText="We'll never share your email"
      errorMessage="Please enter a valid email"
      required={true}
    >
      <TextInput />
    </FieldWrapper>
  );
}

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
childrenReactNodeYesThe input component to wrap

Features

  • Automatically sets appropriate aria attributes for accessibility
  • Displays “Required” or “Optional” indicators based on the required prop
  • Shows character count for fields with maxlength
  • Handles error states with error messaging
  • Maintains consistent styling and layout for all form fields