Form

Form wraps a native <form> and spaces its children with the form tokens. FormRow puts fields side by side from the md breakpoint up, and FormGroup stacks a label, a control and its messages. The controls themselves are on their own pages:

1. Field components pre-compose a label, a control, a description and an error message, and wire the ARIA attributes between them: TextField, EmailField and nine more. Start here.
2. Primitives are the bare parts for layouts the fields don't cover: FormInput, FormLabel and friends, FormSelect, FormRadio and FormCheckbox.

'use client'

import { Button, EmailField, Form, FormRow, TextField, TextareaField } from '@systhemaui/next'

export default function Demo() {
  return (
    <Form onSubmit={(event) => event.preventDefault()} style={{ width: '100%', maxWidth: 640 }}>
      <FormRow>
        <TextField
          name="contact-first-name"
          label="First name"
          autoComplete="given-name"
          required
        />
        <TextField name="contact-last-name" label="Last name" autoComplete="family-name" required />
      </FormRow>
      <EmailField
        name="contact-email"
        label="Email"
        required
        invalidMessage="Enter an email address like jane@example.com."
      />
      <TextareaField name="contact-message" label="Message" style={{ height: 140 }} />
      <Button.button type="submit" variant="primary">
        Send message
      </Button.button>
    </Form>
  )
}

ImportLink to this section

import { Form, FormGroup, FormRow } from '@systhemaui/next'

In a React app without Next.js, import them from @systhemaui/react.

FormLink to this section

Form renders <form class="form"> and passes every <form> attribute through (action, method, onSubmit, noValidate, …). Its direct children are spaced by --form-row-gap-y; hidden inputs and hidden elements are skipped, so they add no gap.

Validation is the browser's: required, pattern, minLength and the input types decide validity, and the CSS styles a control as invalid through :user-invalid, which only matches after the visitor has interacted with it or tried to submit. Add noValidate when you validate in JavaScript, and mark failing controls with the is-invalid class (see Showing an error).

Unlike most components, a form does not reveal on scroll by default: disableAnimation defaults to true. Pass disableAnimation={false} to give it your animationClasses.

LayoutLink to this section

FormRowLink to this section

FormRow lays its groups out in a wrapping flex row with a --form-row-gap-x gap from the md breakpoint up, and stacks them below it. Each group takes an equal share of the row.

import { FormGroup, FormInput, FormLabel, FormRow } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormRow style={{ width: '100%', maxWidth: 640 }}>
      <FormGroup>
        <FormLabel htmlFor="row-city">City</FormLabel>
        <FormInput type="text" name="row-city" autoComplete="address-level2" />
      </FormGroup>
      <FormGroup>
        <FormLabel htmlFor="row-postcode">Postcode</FormLabel>
        <FormInput type="text" name="row-postcode" autoComplete="postal-code" />
      </FormGroup>
    </FormRow>
  )
}

FormGroupLink to this section

FormGroup is a plain <div class="form-group"> that spaces its children by --form-group-gap-y. When it contains a required control, its label gets a trailing asterisk in the required label color. The field components render a FormGroup for you.

WidthsLink to this section

Give a field a width (any CSS percentage) to size it inside a FormRow instead of sharing the row equally. The width is gap-aware: 50% and 50% fill one row exactly, and 33% plus 67% do too. Below md every field is full width again.

import { FormRow, TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 640 }}>
      <FormRow>
        <TextField name="width-street" label="Street" width="67%" />
        <TextField name="width-number" label="Number" width="33%" />
        <TextField name="width-postcode" label="Postcode" width="33%" />
        <TextField name="width-city" label="City" width="67%" />
      </FormRow>
    </div>
  )
}

width only takes effect on a field that is a direct child of a FormRow. Outside a row a group is always full width.

PropsLink to this section

FormRow and FormGroup take every <div> attribute.

HTML and CSSLink to this section

<form class="form">
  <div class="form-row">
    <div class="form-group">
      <label class="form-label" for="first-name">First name</label>
      <input class="form-input" id="first-name" name="first-name" type="text" required />
    </div>
    <div class="form-group" style="--width: 33%">
      <label class="form-label" for="postcode">Postcode</label>
      <input class="form-input" id="postcode" name="postcode" type="text" />
    </div>
  </div>
  <button class="button-primary" type="submit">Send</button>
</form>

The --width custom property is what the width prop writes; the sizing rule only matches a .form-group whose inline style declares it. The gaps come from the form tokens in spacing.

Next.jsLink to this section

@systhemaui/next re-exports the form components from @systhemaui/react unchanged. They hold no state and render on the server; add 'use client' to the module only where you attach event handlers such as onSubmit.

AccessibilityLink to this section

• Every control needs a label. The field components render one; with primitives, pair FormLabel htmlFor with the control's id.
• Group related controls (an address, a set of radios) and give the group a name; RadioField and CheckboxField do this with role="radiogroup" / role="group" and aria-labelledby.
• The required asterisk is visual only. The required attribute is what assistive technology announces.

See Form fields for the ARIA wiring the fields add.

RelatedLink to this section

• Form fields
• Form controls
• Form block and the Forms module