Theme

MCP Server

Getting started

Contributing

Breaking Changes

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

Form

Github

Storybook

A component to handle submitting forms.

Importing

The component can be imported via:

import { Form } from '@customerio/pluma-components/react';

Usage

The Form component is used to handle submitting forms. It is a drop-in replacement for the native <form> element, but with additional features.

<Form>
 <FormLayout>
   <TextField label="First name" />
   <TextField label="Last name" />
   <ButtonGroup>
    <Button type="submit">Submit</Button>
   </ButtonGroup>
  </FormLayout>
</Form>

Disabling a form

To disable a form, you can pass the isDisabled prop to the Form component.

<Form isDisabled>
  <FormLayout>
    <TextField label="First name" />
    <TextField label="Last name" />
    <ButtonGroup>
      <Button type="submit">Submit</Button>
    </ButtonGroup>
  </FormLayout>
</Form>

By default, autoLoading is true. This means the form will disable other submissions and edits while the form is submitting. You can disable this behavior by passing autoLoading={false} to the Form component.

import { Form, TextField, Button, FormLayout, ButtonGroup } from '@customerio/pluma-components/react';

export default function FormExample() {
  const handleSubmit = async () => {
    await new Promise((resolve) => setTimeout(resolve, 2000));
  };

  return (
    <Form onSubmit={handleSubmit}>
      <FormLayout>
        <TextField label="First name" />
        <TextField label="Last name" />
        <ButtonGroup>
          <Button type="submit">Submit</Button>
        </ButtonGroup>
      </FormLayout>
    </Form>
  );
}

API

`PlumaForm` `extends Box`

`autoLoading` `boolean | undefined`

If true, the form will automatically lock the fields when the onSubmit function is called and it returns a promise.

`isDisabled` `boolean | undefined`

Disables the form and all its fields.

`onSubmit` `((evt: OnSubmitArgType) => any) | undefined`

The function to call when the form is submitted

Form

Importing

Usage

Disabling a form

Autoloading

API

`PlumaForm` `extends Box`

`autoLoading` `boolean | undefined`

`isDisabled` `boolean | undefined`

`onSubmit` `((evt: OnSubmitArgType) => any) | undefined`

On this page

Form

Importing

Usage

Disabling a form

Autoloading

API

PlumaForm extends Box

autoLoading boolean | undefined

isDisabled boolean | undefined

onSubmit ((evt: OnSubmitArgType) => any) | undefined

On this page

`PlumaForm` `extends Box`

`autoLoading` `boolean | undefined`

`isDisabled` `boolean | undefined`

`onSubmit` `((evt: OnSubmitArgType) => any) | undefined`