Form

npx @obi/ui add form

import {
  Form,
  FormSection,
  FormField,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
} from '@/src/components/Form/Form';
import Input from '@/src/components/Input/Input';
import Button from '@/src/components/Button/Button';

export default function Example() {
  return (
    <Form className="max-w-sm">
      <FormSection title="Account details" description="Update your login information.">
        <FormField>
          <FormLabel htmlFor="email" required>Email</FormLabel>
          <FormControl>
            <Input id="email" type="email" placeholder="you@example.com" aria-required="true" />
          </FormControl>
          <FormDescription>We will never share your email.</FormDescription>
          <FormMessage>{''}</FormMessage>
        </FormField>
        <FormField>
          <FormLabel htmlFor="username">Username</FormLabel>
          <FormControl>
            <Input id="username" placeholder="johndoe" />
          </FormControl>
        </FormField>
      </FormSection>
      <Button type="submit">Save changes</Button>
    </Form>
  );
}