Form

Form is a wrapper component to apply a <form /> wrapper and handle form submissions.

How to use Form

• The Form component should wrap form elements into <form />
• Provide an onSubmit handler for form validation and submission
• state of the validation of the form should be manipulated from outside

Go ahead and add some fields into your form:

• Form control
• Text input
• Textarea
• Checkbox
• Radio
• Select
• Switch

Code examples

Basic example

function FormaExample() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <Form onSubmit={() => setSubmitted(true)}>
      <FormControl>
        <FormControl.Label isRequired>Name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>
          Please enter your first name
        </FormControl.HelpText>
      </FormControl>

      <FormControl>
        <FormControl.Label>Description</FormControl.Label>
        <Box>
          <Textarea />
        </Box>
        <FormControl.HelpText>Tell me about yourself</FormControl.HelpText>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
function FormaExample() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <Form onSubmit={() => setSubmitted(true)}>
      <FormControl>
        <FormControl.Label isRequired>Name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>
          Please enter your first name
        </FormControl.HelpText>
      </FormControl>

      <FormControl>
        <FormControl.Label>Description</FormControl.Label>
        <Box>
          <Textarea />
        </Box>
        <FormControl.HelpText>Tell me about yourself</FormControl.HelpText>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
Hide source

Using character count

function FormaExample() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <Form onSubmit={() => setSubmitted(true)}>
      <FormControl>
        <FormControl.Label isRequired>user name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>Please enter your username</FormControl.HelpText>
      </FormControl>
      <FormControl>
        <FormControl.Label isRequired>password</FormControl.Label>
        <TextInput maxLength={10} />
        <Flex justifyContent="space-between">
          <FormControl.HelpText>
            Password can only have 10 characters
          </FormControl.HelpText>
          <FormControl.Counter />
        </Flex>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
function FormaExample() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <Form onSubmit={() => setSubmitted(true)}>
      <FormControl>
        <FormControl.Label isRequired>user name</FormControl.Label>
        <TextInput />
        <FormControl.HelpText>Please enter your username</FormControl.HelpText>
      </FormControl>
      <FormControl>
        <FormControl.Label isRequired>password</FormControl.Label>
        <TextInput maxLength={10} />
        <Flex justifyContent="space-between">
          <FormControl.HelpText>
            Password can only have 10 characters
          </FormControl.HelpText>
          <FormControl.Counter />
        </Flex>
      </FormControl>
      <Button variant="primary" type="submit" isDisabled={submitted}>
        {submitted ? 'Submitted' : 'Click me to submit'}
      </Button>
    </Form>
  );
}
Hide source

Integrations

It is possible to integrate the form with solutions like Formik or React form hook