FormLayout

Source code

Personal information

Please provide your personal details

First name

Last name

Date of birth

Phone number

Address

Where do you currently reside?

Street address

City

State / Province

ZIP / Postal code

Contact information

How can we reach you?

Alternative email

Emergency contact name

Emergency contact phone

import { FormLayout, FormSection } from "rfui-package";

#Basic

Personal information

Please provide your personal details

First name

Last name

Date of birth

Phone number

Address

Where do you currently reside?

Street address

City

State / Province

ZIP / Postal code

Contact information

How can we reach you?

Alternative email

Emergency contact name

Emergency contact phone

<FormLayout>
  <FormSection
    title="Personal information"
    description="Please provide your personal details"
  >
    <FormField label="First name">
      <Input name="firstName" />
    </FormField>
    <FormField label="Last name">
      <Input name="lastName" />
    </FormField>
    <FormField label="Date of birth">
      <Input name="dateOfBirth" type="date" />
    </FormField>
    <FormField label="Phone number">
      <Input name="phone" type="tel" />
    </FormField>
  </FormSection>
  <FormSection
    title="Address"
    description="Where do you currently reside?"
  >
    <FormField label="Street address">
      <Input name="streetAddress" />
    </FormField>
    <FormField label="City">
      <Input name="city" />
    </FormField>
    <FormField label="State / Province">
      <Input name="state" />
    </FormField>
    <FormField label="ZIP / Postal code">
      <Input name="zipCode" />
    </FormField>
  </FormSection>
  <FormSection
    title="Contact information"
    description="How can we reach you?"
  >
    <FormField label="Email">
      <Input name="email" type="email" />
    </FormField>
    <FormField label="Alternative email">
      <Input name="alternativeEmail" type="email" />
    </FormField>
    <FormField label="Emergency contact name">
      <Input name="emergencyContactName" />
    </FormField>
    <FormField label="Emergency contact phone">
      <Input name="emergencyContactPhone" type="tel" />
    </FormField>
  </FormSection>
</FormLayout>

#Vertical layout

The default layout is horizontal but if you pass layout="vertical", the sections will be displayed vertically.

Personal information

Please provide your personal details

First name

Last name

Date of birth

Phone number

Address

Where do you currently reside?

Street address

City

State / Province

ZIP / Postal code

Contact information

How can we reach you?

Alternative email

Emergency contact name

Emergency contact phone

<FormLayout layout="vertical">
  <FormSection
    title="Personal information"
    description="Please provide your personal details"
  >
    <FormField label="First name">
      <Input name="firstName" />
    </FormField>
    <FormField label="Last name">
      <Input name="lastName" />
    </FormField>
    <FormField label="Date of birth">
      <Input name="dateOfBirth" type="date" />
    </FormField>
    <FormField label="Phone number">
      <Input name="phone" type="tel" />
    </FormField>
  </FormSection>
  <FormSection
    title="Address"
    description="Where do you currently reside?"
  >
    <FormField label="Street address">
      <Input name="streetAddress" />
    </FormField>
    <FormField label="City">
      <Input name="city" />
    </FormField>
    <FormField label="State / Province">
      <Input name="state" />
    </FormField>
    <FormField label="ZIP / Postal code">
      <Input name="zipCode" />
    </FormField>
  </FormSection>
  <FormSection
    title="Contact information"
    description="How can we reach you?"
  >
    <FormField label="Email">
      <Input name="email" type="email" />
    </FormField>
    <FormField label="Alternative email">
      <Input name="alternativeEmail" type="email" />
    </FormField>
    <FormField label="Emergency contact name">
      <Input name="emergencyContactName" />
    </FormField>
    <FormField label="Emergency contact phone">
      <Input name="emergencyContactPhone" type="tel" />
    </FormField>
  </FormSection>
</FormLayout>

#Props

Prop	Required	Default	Type and notes
`layout`	-	`'horizontal'`	`'horizontal' \| 'vertical'`
`...rest`	-	-	`StackType`

`FormSection`

Prop	Required	Default	Type and notes
`title`		-	`string`
`description`	-	-	`string`
`children`		-	`ComponentChild`
`...rest`	-	-	`ComponentProps<'div'>`