<div id="root"></div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  width: 300px;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}
View Compiled
import React, { useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const action = (event) => {
  event.preventDefault();

  const data = new FormData(event.currentTarget);
  console.log("Saving...", Object.fromEntries(data.entries()));
};

const App = () => {
  const [formData, setFormData] = useState(new FormData());

  return (
    <div className="App">
      <form
        onSubmit={action}
        onChange={(event) => setFormData(new FormData(event.currentTarget))}
      >
        <fieldset>
          <legend>Identity</legend>
          <div>
            <label for="name">Name : </label>
            <input id="name" name="name" defaultValue="Chris" />
          </div>
          <div>
            <label for="email">Email : </label>
            <input
              id="email"
              type="email"
              name="email"
              defaultValue="chris@email.test"
            />
          </div>
        </fieldset>

        <fieldset>
          <legend>Event</legend>
          <div>
            <label for="presence">Presence : </label>
            <input
              id="presence"
              type="checkbox"
              name="presence"
              defaultChecked
            />
          </div>
          <div>
            <label for="diet">Diet : </label>
            <input
              id="diet"
              name="diet"
              disabled={formData.get("presence") !== "on"}
            />
          </div>
        </fieldset>

        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.