Design language

Form and field

We’ll send the hackathon details here

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>