@elemental-ui-alpha/fieldset v0.0.2

Fieldset

import { Fieldset } from '@elemental-ui-alpha/fieldset';

Usage

Wrap the group of related inputs with the fieldset and provide a legend. The Fieldset component extends the Stack component.

<Fieldset legend="Billing Address" gap="large">
  <TextInput label="Address line 1" />
  <TextInput label="Address line 2" placeholder="(optional)" />
  <TextInput label="City" />
  <Columns gap="medium">
    <TextInput label="State" />
    <TextInput label="Postcode" />
  </Columns>
</Fieldset>

Legend Appearance

Though it must be present, you can alter the appearance of the legend:

• legend (default)
• label
• none

<Fieldset legend="What's your name?" legendAppearance="label">
  <Columns gap="medium">
    <TextInput
      label="first name"
      labelVisibility="hidden"
      placeholder="First name"
    />
    <TextInput
      label="last name"
      labelVisibility="hidden"
      placeholder="Last name"
    />
  </Columns>
</Fieldset>