Skip to content
Altitude Standalone Components

Form

Form Component

The Form component provides a complete solution for creating forms with built-in validation, submission handling, and responsive layouts.

Example

Contact Form

Fill out this form to get in touch with our team.

Usage

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


export default function ContactPage() {
  const handleSubmit = (data) => {
    console.log("Form submitted:", data);
    // Process form data
  };


  return (
    <Form
      title="Contact Form"
      description="Fill out this form to get in touch with our team."
      onSubmit={handleSubmit}
      submitText="Send Message"
      submittedText="Message Sent Successfully!"
      splitLayout={true}
    >
      <TextInputField
        id="name"
        name="name"
        label="Your Name"
        errorMessage="Name is required"
        required={true}
      />
      <TextAreaField
        id="message"
        name="message"
        label="Your Message"
        errorMessage="Please provide a message"
        required={true}
      />
    </Form>
  );
}

Props

PropTypeRequiredDescription
titlestringYesForm title displayed at the top
descriptionstringNoForm description text
onSubmitfunctionYesHandler function that receives form data
submitTextstringYesText for the submit button
submittedTextstringNoSuccess message shown after form submission
childrenReactNodeNoForm field components
classNamestringNoAdditional CSS classes
splitLayoutbooleanNoWhether to use a split layout (title/description on left, form on right)

Features

  • Automatic form validation with error handling
  • Support for various field types
  • Responsive layout options
  • Success state management
  • Form state tracking (submitting, submitted)