Layout·component·@astryxdesign/core

Form Layout

A layout container that arranges form fields with consistent spacing and direction. FormLayout handles where fields go, not state or submission. Wrap it in a <form> for that. Supports vertical (default), horizontal, and horizontal-labels directions, and can be nested to mix them.

Open in Playground @astryxdesign/core/FormLayout

Showcases and examples

5 documented examples

Form Layout

A vertical form layout with text input fields.

Open Playground ↗

Preview loads on approachPreview loads on approach

Exact source · form-layout-showcase

// Copyright (c) Meta Platforms, Inc. and affiliates.

'use client';

import {useState} from 'react';
import {FormLayout} from '@astryxdesign/core/FormLayout';
import {TextInput} from '@astryxdesign/core/TextInput';

export default function FormLayoutShowcase() {
  const [first, setFirst] = useState('Priya');
  const [last, setLast] = useState('Sharma');
  const [email, setEmail] = useState('priya.sharma@example.com');
  const [city, setCity] = useState('San Francisco');
  const [state, setState] = useState('CA');
  const [zip, setZip] = useState('94105');

  return (
    <FormLayout>
      <FormLayout direction="horizontal">
        <TextInput label="First Name" value={first} onChange={setFirst} />
        <TextInput label="Last Name" value={last} onChange={setLast} />
      </FormLayout>
      <TextInput label="Email" value={email} onChange={setEmail} />
      <FormLayout direction="horizontal">
        <TextInput label="City" value={city} onChange={setCity} />
        <TextInput label="State" value={state} onChange={setState} />
        <TextInput label="ZIP" value={zip} onChange={setZip} />
      </FormLayout>
    </FormLayout>
  );
}

Usage

Stack fields vertically for most forms. It's the easiest to scan top to bottom.
Nest a horizontal FormLayout inside a vertical one when fields naturally pair up, like First Name + Last Name or City + State + ZIP.
Use horizontal-labels for settings pages where labels sit beside their inputs.
Use FormLayout for form state or submission. It's just layout. Wrap it in a <form> for that.
Put unrelated fields side by side in a horizontal layout. Save it for fields that belong together.
Nest horizontal-labels inside another FormLayout. It uses CSS Grid and needs to be the outermost container.

Typed props

Prop	Type and behavior
`direction`	`'vertical' \| 'horizontal' \| 'horizontal-labels'` · default 'vertical' Controls field arrangement. Vertical stacks top-to-bottom, horizontal arranges left-to-right with equal flex-grow, and horizontal-labels uses CSS Grid with labels to the left of inputs (collapses to vertical on narrow viewports <=480px).
`defaultOptionality`	`'optional' \| 'required'` The state the form treats as its default, so only the exception shows an optional/required indicator. With "optional", only fields marked isRequired show an indicator; with "required", only fields marked isOptional do. A field that restates the default shows nothing. Under "required" the unmarked fields also expose aria-required so screen readers match the visual default; aria-required only, never the native required attribute. Leave unset for today's per-field behavior.
`children`	`ReactNode` Form fields to arrange. Accepts Astryx inputs (TextInput, Selector, etc.) and Field-wrapped custom controls.
`xstyle`	`StyleXStyles` StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.

Anatomy

Form title · optional

Heading that describes the purpose of the form.

Fields · required

Input components with labels for collecting user data.

Footer · optional

Contains confirmation buttons such as Submit or Cancel.

Theming

Targets

astryx-form-layout

Visual props: direction