Form & Inputs

Forms are central to user interactions. Use proper labels, error messages, and keyboard-friendly controls.

Example

function ContactForm() {
  return (
    <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
      <label>
        <span>Name</span>
        <input name="name" required className="input" />
      </label>

      <label>
        <span>Email</span>
        <input type="email" name="email" required className="input" />
      </label>

      <label>
        <span>Message</span>
        <textarea name="message" className="textarea" />
      </label>

      <button type="submit" className="btn btn-primary">
        Send
      </button>
    </form>
  );
}

Validation and accessibility

Use native validation where possible and provide inline error messages.
Associate labels with inputs using <label> and id attributes.

Form & Inputs

Form & Inputs

On this page