Skip to Content
ComponentsInputForm

Form

A <form> wrapper with layout presets. On submit it prevents the default navigation and calls onSubmit with the values of all named controls (collected via FormData). Also accepts native <form> attributes.

import { Form, FormField, TextInput, Button } from '@gg-software/ui';
 
<Form layout="vertical" onSubmit={(values) => save(values)}>
    <FormField label="Name" required>
        <TextInput name="name" placeholder="Jane Doe" required />
    </FormField>
    <FormField label="Email">
        <TextInput name="email" type="email" />
    </FormField>
    <Button type="submit" variant="primary">
        Submit
    </Button>
</Form>;

values is a Record<string, FormDataEntryValue> keyed by each control’s name.

Props

PropTypeDefaultDescription
childrenReactNode—content rendered inside the component
layout"horizontal" | "vertical" | "inline"vertical
onSubmit((values: Record<string, FormDataEntryValue>, event: FormEvent<HTMLFormElement>) => void)—called with the collected field values (from named controls) on submit

* required · generated from packages/ui/src/input/Form/Form.tsx

FieldsetBadge