Form

A flexible and styled form component that wraps form elements and provides validation hooks.

Usage

Basic Form

Render the Form with children elements like Input and Button:

<Form onSuccess={(e) => console.log('Form Submitted')} onError={() => console.log('Error')}>
  <Flex>
    <Typography.Text size="2" weight="bold" ml="1" mb="1">
      UserNamesu
    </Typography.Text>
  </Flex>
  <TextField placeholder="Username" />
  <Flex>
    <Typography.Text size="2" weight="bold" ml="1" mb="1">
      Password *
    </Typography.Text>
  </Flex>
  <TextField type="password" placeholder="Password" required />
  <Button highContrast type="submit">
    Submit
  </Button>
</Form>

Form with Validation Feedback

If a form field fails validation, the hasSubmitted prop will be true for that child, and you can use it to display validation feedback.

<Form onSuccess={(e) => console.log('Form Submitted')} onError={() => console.log('Error')}>
  <Flex>
    <Typography.Text size="2" weight="bold" ml="1" mb="1">
      UserName *
    </Typography.Text>
  </Flex>
  <TextField placeholder="Username" required hasSubmitted={(hasSubmitted) => hasSubmitted && 'Field is required'} />
  <Button highContrast type="submit">
    Submit
  </Button>
</Form>

API

Props