Pluma

Theme

About

MCP Server

Getting started

FormattedRelativeTime

Combobox with Add New

Density

Inline Form Controls

Refinement levers

Search with DropdownMenu

Componentsv2.170.1

Iconsv1.15.0

MCPv0.8.18

Tokensv0.34.1

FormLayout

Github

Storybook

Legacy component

A flexible layout component for arranging form elements with customizable spacing.

Importing

The component can be imported via:

import { FormLayout, FormLayoutGroup } from '@customerio/pluma-components/react';

First name

Last name

<FormLayout>
    <TextField label="First name" />
    <TextField label="Last name" />
</FormLayout>

Horizontal Grouping

The FormLayoutGroup is used for horizontally aligning form items within a FormLayout. This is useful for grouping related inputs such as first and last names or other paired fields.

First name

Last name

<FormLayout>
    <FormLayoutGroup>
        <TextField label="First name" />
        <TextField label="Last name" />
    </FormLayoutGroup>
    <TextField label="Email" />
</FormLayout>

Gap Customization

The gap prop allows you to control the spacing between child elements. This should not be used unless explicitly told by a designer.

First name

Last name

<FormLayout gap="600">
    <TextField label="First name" />
    <TextField label="Last name" />
</FormLayout>

API

`PlumaFormLayout` `extends Stack`

`gap` `"0" | "025" | "050" | "075" | "100" | "125" | "150" | "175" | "200" | "225" | "250" | "275" | "300" | "350" | "400" | "450" | "500" | "600" | "800" | "900" | "1000" | "1200" | "1600" | "2000" | "2400" | "2800" | "3200" | "icon-lg" | "icon-md" | "icon-sm" | "icon-v2-lg" | "icon-v2-md" | "icon-v2-sm" | "icon-v2-xl" | "icon-xl" | "icon-xs" | "icon-xxs" | "padding-button-medium" | "padding-button-small" | "padding-header" | undefined`

The space between rows. See space tokens / MDN Gap

`PlumaFormLayoutGroup` `extends Box`

`gap` `"0" | "025" | "050" | "075" | "100" | "125" | "150" | "175" | "200" | "225" | "250" | "275" | "300" | "350" | "400" | "450" | "500" | "600" | "800" | "900" | "1000" | "1200" | "1600" | "2000" | "2400" | "2800" | "3200" | "icon-lg" | "icon-md" | "icon-sm" | "icon-v2-lg" | "icon-v2-md" | "icon-v2-sm" | "icon-v2-xl" | "icon-xl" | "icon-xs" | "icon-xxs" | "padding-button-medium" | "padding-button-small" | "padding-header" | undefined`

The space between columns. See space tokens / MDN Gap

FormLayout

Importing

Horizontal Grouping

Gap Customization

API

PlumaFormLayout extends Stack

PlumaFormLayoutGroup extends Box

On this page

`PlumaFormLayout` `extends Stack`

`PlumaFormLayoutGroup` `extends Box`