Form Section

Form sections group related input fields and provide spacing.

Personal Information
General Information
<Form>
    <FormSection title="Personal Information">
        <Input id="name" labelText="Name" />
        <Input id="birthdate" labelText="Date of birth"/>
    </FormSection>
    <FormSection title="General Information">
        <Input id="occupation" labelText="Occupation" />
    </FormSection>
</Form>

Variations

Without a Title

<Form>
    <FormSection>
        <Input id="name" labelText="Name" />
        <Input id="birthdate" labelText="Date of birth"/>
        <Input id="birthplace" labelText="Place of birth" />
    </FormSection>
    <FormSection>
        <Input id="gender" labelText="Gender" />
        <Input id="occupation" labelText="Occupation" />
    </FormSection>
</Form>

Props

NameTypeDefaultDescription

title

string

null

Title of Form Section

className

String

undefined

className passed to the form section component.

Related components