Form and field
Layout
StackedInline
State
DefaultInvalidDisabled
Code
import { Button } from '@/ui/button';
import { Field, FieldDescription, FieldError, FieldLabel, Form } from '@/ui/field';
import { Input } from '@/ui/input';
<Form onFormSubmit={send}>
<Field name="email">
<FieldLabel required>Email</FieldLabel>
<Input type="email" required placeholder="you@example.com" />
<FieldDescription>We’ll send the hackathon details here</FieldDescription>
<FieldError match="valueMissing">Enter your email</FieldError>
<FieldError match="typeMismatch">Enter a valid email</FieldError>
</Field>
<Field name="team">
<FieldLabel optional>Team name</FieldLabel>
<Input placeholder="Solo" />
</Field>
<Button type="submit" size="md">Get notified</Button>
</Form>