Form layouts

Multi-section form scaffolds with field groups (stacked and two-column variants). Presentational only — wrap with your own form element.

Preview

Profile

This information will be displayed publicly.

We'll never share your email.

Address

Used for shipping and billing.

React preview

LiveView (HEEx) 

alias DesignSystem.UI.FormInputs
alias DesignSystem.UI.FormLayouts

<form>
  <FormLayouts.form_layout>
    <FormLayouts.form_section
      title="Profile"
      description="Public profile information."
      variant="stacked"
    >
      <FormLayouts.form_field label="First name" for="fname" span={3}>
        <FormInputs.text id="fname" name="first_name" />
      </FormLayouts.form_field>
      <FormLayouts.form_field label="Last name" for="lname" span={3}>
        <FormInputs.text id="lname" name="last_name" />
      </FormLayouts.form_field>
    </FormLayouts.form_section>
  </FormLayouts.form_layout>

  <FormLayouts.form_actions submit_label="Save" />
</form>

React (JSX) 

import {
  FormActions,
  FormField,
  FormLayout,
  FormSection,
  TextInput,
} from "../ui/index.mjs"

<form onSubmit={handleSubmit}>
  <FormLayout>
    <FormSection
      title="Profile"
      description="Public profile information."
      variant="stacked"
    >
      <FormField label="First name" htmlFor="fname" span={3}>
        <TextInput id="fname" name="first_name" />
      </FormField>
      <FormField label="Last name" htmlFor="lname" span={3}>
        <TextInput id="lname" name="last_name" />
      </FormField>
    </FormSection>
  </FormLayout>

  <FormActions submitLabel="Save" />
</form>