For AI agents: the complete documentation index is available at /ooui-react/en/llms.txt, the full documentation bundle is available at /ooui-react/en/llms-full.txt, and this page is available as Markdown at /ooui-react/en/components/action-field-layout/index.md.
ooui-react
  • English

      • ActionFieldLayout

      Source | Original component

      A field layout with an action button: built on FieldLayout with an extra button slot beside the field control (usually a Button or a ButtonInput).

      Basic usage

      Add
      Added: ooui
      import { useState } from "react";
import { ActionFieldLayout, Button, TextInput } from "ooui-react";

function App() {
  const [tags, setTags] = useState<string[]>(["ooui"]);

  return (
    <div style={{ maxWidth: 420 }}>
      <ActionFieldLayout
        label="Add tag"
        button={
          <Button
            flags={["primary", "progressive"]}
            onClick={() => setTags((prev) => [...prev, prev.length.toString()])}
          >
            Add
          </Button>
        }
      >
        <TextInput placeholder="Type and add" />
      </ActionFieldLayout>
      <div style={{ marginTop: 8 }}>Added: {tags.join(", ")}</div>
    </div>
  );
}

export default App;

      Inline controls

      When the field control is a span-rooted inline control (such as CheckboxInput or ButtonInput), pass fieldInline so the input wrapper renders as a span. Passing it wrongly has no visual consequence (the theme CSS normalizes both wrappers' layout); it only keeps the DOM shape aligned with the original.

      API

      Inherits all FieldLayout props (label / align / title, etc.), plus:

      PropDescriptionTypeDefault
      buttonThe button control beside the fieldReactNode—
      fieldInlineWhether the field control is a span-rooted inline control (decides the input wrapper: span vs div)booleanfalse

      See also