Installation
npm install @marmoui/uiyarn add @marmoui/uipnpm add @marmoui/uibun add @marmoui/uiUsage
import { Form, FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage } from '@marmoui/ui';
import { useForm } from 'react-hook-form';Examples
Basic Form
Simple Form
Form with validation and submission
We'll send a confirmation to this address.
function MyForm() {
const form = useForm({
defaultValues: { name: '', email: '' }
});
return (
<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
<FormField
control={form.control}
name="name"
render={({ field }) => (
<FormItem>
<FormLabel required>Name</FormLabel>
<FormControl>
<Input placeholder="Enter your name" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel required>Email</FormLabel>
<FormControl>
<Input type="email" placeholder="you@example.com" {...field} />
</FormControl>
<FormDescription>We'll send a confirmation to this address.</FormDescription>
<FormMessage />
</FormItem>
)}
/>
<Button type="submit">Submit</Button>
</form>
</Form>
);
}Best Practices
✓
Validate on blur and submit
Validate fields when the user leaves the field and again on form submission for the best user experience.
✓
Show errors inline
Display error messages directly below the relevant field using FormMessage.
✗
Don't clear the form on error
Preserve user input when validation fails so they can correct specific fields.
✗
Don't skip FormControl
Always wrap inputs in FormControl to ensure proper aria attributes are applied.
Props
Props
Accessibility
- FormControl automatically applies
aria-describedbylinking to description and error messages. - FormLabel uses the
requiredprop to add both visual and ARIA required indicators. - FormMessage announces validation errors to screen readers.
- Form submission respects keyboard interaction (Enter key).