Form

A form is a collection of input elements that allows the user to submit data to a server.

Import

import { Form } from "@aeonkit/react";

Usage

Default

The Form component is used to wrap form elements with a form tag.

Preview

First Name

Code

<Form>
  <Form.Control>
    <Form.Label>First Name</Form.Label>
    <Input type="text" placeholder="First Name" />
  </Form.Control>
</Form>

Helper Text

Use this component to provide additional information about the input field.

Preview

First Name

Your cool first name

Code

<Form.Control>
  <Form.Label>First Name</Form.Label>
  <Input type="text" placeholder="First Name" />
  <Form.HelperText>Your cool first name</Form.HelperText>
</Form.Control>

Error

Use this component to display an error message when the input field is invalid. Add the invalid prop to the Form.Control component to apply error styles.

Preview

First Name

First name is required

Code

<Form.Control invalid>
  <Form.Label>First Name</Form.Label>
  <Input type="text" placeholder="First Name" />
  <Form.ErrorMessage>First name is required</Form.ErrorMessage>
</Form.Control>

Props

Form

API Interface: FormProps

FormControl

invalid?

boolean

Whether the form control is invalid or not.

Default: false

API Interface: FormControlProps

FormErrorMessage

API Interface: FormErrorMessageProps

FormHelperText

API Interface: FormHelperTextProps

FormLabel

API Interface: FormLabelProps