Form

import { useState } from 'react';
import { Button, Checkbox, Form, FormError, Select, SelectItem, TextField } from '@arbol-ai/ui';

const NewContactExample = () => {
  const [errors, setErrors] = useState<Record<string, string>>({});
  const [refusal, setRefusal] = useState<string>();
  return (
    <Form
      className="max-w-sm"
      onSubmit={(event) => {
        event.preventDefault();
        const data = new FormData(event.currentTarget);
        const name = data.get('name');
        setErrors(typeof name === 'string' && name.trim() !== '' ? {} : { name: 'Enter the contact name.' });
        setRefusal(
          data.get('email') === 'taken@example.com'
            ? 'A contact with that email already exists. Open it instead of creating another.'
            : undefined
        );
      }}
      validationErrors={errors}
    >
      <TextField isRequired label="Name" name="name" />
      <TextField label="Email" name="email" type="email" />
      <Select defaultValue="whatsapp" label="Preferred channel" name="channel">
        <SelectItem id="whatsapp">WhatsApp</SelectItem>
        <SelectItem id="voice">Phone call</SelectItem>
      </Select>
      <Checkbox defaultSelected name="reminders">
        Send appointment reminders
      </Checkbox>
      <FormError>{refusal}</FormError>
      <Button className="self-start" type="submit">
        Save contact
      </Button>
    </Form>
  );
};

<NewContactExample />