Form

#Default usage

#Usage

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

export function Example() {
  return (
    <Form
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        console.log(Object.fromEntries(data));
      }}
    >
      <FormField label="Workspace" required>
        <Input name="workspace" placeholder="Design system" />
      </FormField>
      <FormActions>
        <Button type="reset" variant="ghost">Reset</Button>
        <Button type="submit">Save</Button>
      </FormActions>
    </Form>
  );
}

#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.