Form
Renders a <form> and provides form-wide field defaults through FormContext. It is the lowest
priority in the override chain - a FormControl or an explicit prop on
a control always wins.
Architecture: Form is purely presentational + context. It holds no form state, runs no
validation, and is not tied to any form library - bridging to a specific one (e.g. TanStack Form's
Field) is left to the consuming app. Pass onSubmit straight through; wire it to your form
library's submit handler (e.g. form.handleSubmit()).
Examples
Default
const args: Partial<FormProps> = { size: 'md', color: 'primary', fullWidth: true }
<Form {...args} onSubmit={(event) => event.preventDefault()}>
<Flex flexDirection="column" gap={4} maxWidth="420px">
<FormControl>
<Flex flexDirection="column" gap={1} alignItems="flex-start">
<FormLabel>Name</FormLabel>
<TextInput variant="outlined" placeholder="John Smith" />
</Flex>
</FormControl>
<FormControl>
<Flex flexDirection="column" gap={1} alignItems="flex-start">
<FormLabel>Email</FormLabel>
<TextInput variant="outlined" placeholder="[email protected]" />
<FormHelperText>We'll never share it.</FormHelperText>
</Flex>
</FormControl>
</Flex>
</Form>