Fieldset

The <fieldset> element is a convenient way to create groups of widgets that share the same purpose, for styling and semantic purposes.

You can label the <fieldset> by using the legend attribute or including a <legend> element just below the opening <Fieldset> tag.

Examples

Fieldset

<Formik
  initialValues={{
    fullName: '',
    phoneNumber: '',
    cardholderName: '',
    cardNumber: ''
  }}
  onSubmit={() => {}}
>
  <Flex flexDirection="column" width={1}>

    <Fieldset legend="Contact details">
      <Input placeholder="Full name" name={'fullName'} />
      <Input placeholder="Phone Number" name={'phoneNumber'} />
    </Fieldset>

    <Fieldset legend="Payment details">
      <Input placeholder="Cardholder Name" name={'cardholderName'} />
      <Input placeholder="Card Number" name={'cardNumber'} />
    </Fieldset>

  </Flex>
</Formik>