EEnterUI
DocsComponentsThemesDonation
Get Started
      • FormLayout
      • SettingsSection
EnterUIDocsProduct OperationsProduct SurfacesSettings and FormsFormLayout
Product OperationsUpdated 6 May 2026

FormLayout

Product-ready form scaffold with title, description, two-column sections, and footer actions.

FormLayout owns form-level structure: an optional title/description header, sectioned two-column body, and a footer slot for FormActions. Use FormLayoutSection to group related fields.

#Default usage

Settings form

Two-column layout collapses to one column under 720px.

Workspace settings

These options apply to everyone in the workspace.

Identity

Visible across the product.

Code
<FormLayout
  description="These options apply to everyone in the workspace."
  title="Workspace settings"
>
  <FormLayoutSection description="Visible across the product." title="Identity">
    <Input defaultValue="Frogg" />
  </FormLayoutSection>
</FormLayout>

#Import

Code
import { FormLayout, FormLayoutSection } from "@froggdesign/enter-ui-react";

#Accessibility

FormLayout wraps a real <form> element so submit handlers, native validation, and Enter-to-submit work without extra wiring.

#API

  • FormLayout extends native <form>. Props: title, description, footer.
  • FormLayoutSection: titled two-column subsection.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

PreviousAuditLog
NextSettingsSection

On this page

  1. Default usage
  2. Import
  3. Accessibility
  4. API
  5. Styling