Form

Form defines how EnterUI handles a precise, quiet form layout that works with native form submission, including default structure, accessible states, and token-driven styling.

#Default usage

<Form action="" className="docs-preview-stack" style={{ width: "min(100%, 360px)" }}>
  <FormField label="Workspace" labelProps={{ htmlFor: "form-basic-workspace" }} required>
    <Input id="form-basic-workspace" placeholder="Design system" />
  </FormField>
  <FormField label="Description" labelProps={{ htmlFor: "form-basic-description" }} description="Visible to teammates.">
    <Input id="form-basic-description" placeholder="A product surface" />
  </FormField>
  <FormActions>
    <Button type="reset" variant="ghost">Reset</Button>
    <Button type="submit">Save</Button>
  </FormActions>
</Form>

#Import

import {
  Button,
  Form,
  FormActions,
  FormField,
  Input,
} from "@froggdesign/enter-ui-react";

#Patterns

#Accessibility

Form sets noValidate by default so the surface can present its own error states. Use FormMessage tone="error" for status text — it sets role="alert" automatically. Pair fields with FormField to keep the label, control, and error region linked.

#API

• Form renders a native <form> element. All standard <form> props pass through.
• FormSection: title, description for grouped fields.
• FormDescription: muted text for context.
• FormMessage: tone = neutral, info, success, warning, error.
• FormActions: align = start, end, or between.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.