Form

import * as Form from '@radix-ui/react-form';
import './styles.css';

export default () => (
  <Form.Root className="FormRoot">
    <Form.Field className="FormField" name="email">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <Form.Label className="FormLabel">Email</Form.Label>
        <Form.Message className="FormMessage" match="valueMissing">
          Please enter your email
        </Form.Message>
        <Form.Message className="FormMessage" match="typeMismatch">
          Please provide a valid email
        </Form.Message>
      </div>
      <Form.Control asChild>
        <input className="Input" type="email" required />
      </Form.Control>
    </Form.Field>

    <Form.Field className="FormField" name="question">
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <Form.Label className="FormLabel">Question</Form.Label>
        <Form.Message className="FormMessage" match="valueMissing">
          Please enter a question
        </Form.Message>
      </div>
      <Form.Control asChild>
        <textarea className="Textarea" required />
      </Form.Control>
    </Form.Field>

    <Form.Submit asChild>
      <button className="Button" style={{ marginTop: 10 }}>
        Submit
      </button>
    </Form.Submit>
  </Form.Root>
);

import { useState } from 'react';
import * as Form from '@radix-ui/react-form';

export default () => {
  const [serverErrors, setServerErrors] = useState({});

  const handleSubmit = async (event) => {
    event.preventDefault();
    const data = Object.fromEntries(new FormData(event.currentTarget));

    try {
      const response = await fetch('/api/form', {
        method: 'POST',
        body: JSON.stringify(data),
      });

      if (!response.ok) {
        const errors = await response.json();
        setServerErrors(errors);
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Form.Root onSubmit={handleSubmit} onClearServerErrors={() => setServerErrors({})}>
      <Form.Field name="username" serverInvalid={!!serverErrors.username}>
        <Form.Label>Username</Form.Label>
        <Form.Control asChild>
          <input type="text" required />
        </Form.Control>
        <Form.Message match="valueMissing">Please enter a username</Form.Message>
        {serverErrors.username && (
          <Form.Message forceMatch>{serverErrors.username}</Form.Message>
        )}
      </Form.Field>

      <Form.Submit>Submit</Form.Submit>
    </Form.Root>
  );
};

import * as Form from '@radix-ui/react-form';

export default () => (
  <Form.Root>
    <Form.Field name="password">
      <Form.Label>Password</Form.Label>
      <Form.Control asChild>
        <input type="password" required minLength={8} />
      </Form.Control>
      <Form.Message match="valueMissing">
        Please enter a password
      </Form.Message>
      <Form.Message match="tooShort">
        Password must be at least 8 characters
      </Form.Message>
      <Form.Message
        match={(validity, formData) => {
          const password = formData.get('password');
          return validity.valid && !/[A-Z]/.test(password);
        }}
      >
        Password must contain at least one uppercase letter
      </Form.Message>
    </Form.Field>

    <Form.Submit>Submit</Form.Submit>
  </Form.Root>
);