#FormLayout

Source | Original component

Form container: it renders a <form> wrapping several FieldLayouts. It does no data management itself — input controls with a name (TextInput, CheckboxInput, ButtonInput, etc.) submit natively with the <form>. When you don't need native submission semantics, just place the controls in your own container; you don't have to add this layer.

#Basic usage

Call event.preventDefault() inside onSubmit following React convention to stop the real navigation (the original blocks the default submit when the event listener returns false). The submit action is triggered by a ButtonInput with type="submit".

import { useState } from "react";
import {
  ButtonInput,
  CheckboxInput,
  FieldLayout,
  FormLayout,
  TextInput,
} from "ooui-react";

function App() {
  const [submitted, setSubmitted] = useState(false);

  return (
    <FormLayout
      method="post"
      onSubmit={(event) => {
        event.preventDefault();
        setSubmitted(true);
      }}
    >
      <FieldLayout label="Username">
        <TextInput name="username" placeholder="Required" required />
      </FieldLayout>
      <FieldLayout label="I agree to the terms" align="inline">
        <CheckboxInput name="agree" value="yes" required />
      </FieldLayout>
      <FieldLayout label=" " invisibleLabel>
        <ButtonInput type="submit" flags={["primary", "progressive"]}>
          Submit
        </ButtonInput>
      </FieldLayout>
      {submitted && <div style={{ marginTop: 8 }}>Submitted (page navigation prevented)</div>}
    </FormLayout>
  );
}

export default App;

#Submission attributes

method, action and enctype pass straight through to the native <form>'s attributes of the same names:

#Controls that submit with the form

Native submission only carries the values of real form controls: the input family (TextInput, MultilineTextInput, NumberInput, ComboBoxInput, SearchInput), the check family (CheckboxInput, RadioInput), and SelectFileInputWidget / HiddenInputWidget render real controls — with a name, they submit with the form.

The display forms of the select family (Select, Dropdown, RadioSelect, CheckboxMultiselect, TagMultiselect, TabSelect, etc.) render no real form control; placed in a FormLayout they silently drop their values on submit — to submit a selection, switch to the matching form-field forms DropdownInput, RadioSelectInput and CheckboxMultiselectInput, or carry arbitrary custom values with HiddenInputWidget.

#API

#See also

• Layout for fields and labels: FieldLayout
• Input controls that submit with the form: TextInput, CheckboxInput
• Bundle output and SSR limits: see Usage