Accept Terms

formseasy

10:00starts when you type

Guide

Challenge mode

# Requirements status

not runstarts with the checkbox unchecked and the button disabled
not runenables the button when the checkbox is checked
not runshows the thank-you message when submitting
not runchecking again after unchecking does not bring the thank-you message back

They are shown when you run the tests. Until then they appear as a hidden requirement.

Build a minimal form: a terms checkbox that enables the submit button. You practice controlled checkboxes and values derived from state.

The complete interface: the checkbox, the Submit button and the thank-you message.
Your job is the logic: know whether the terms were accepted and react to the checkbox and the button.
Keep the texts I accept the terms, Submit and Thanks for accepting!, and the message's role="status": the tests use them.

At the start the checkbox is unchecked and the Submit button is disabled.
Checking the checkbox enables the button.
Pressing Submit shows Thanks for accepting!.
Unchecking the box cancels the submission: if you check it again, the message only comes back after a new Submit.

Hint 1

Accepting or not is a boolean: store it in useState and make the checkbox control it with checked.

Hint 2

To read a checkbox's value in onChange use event.target.checked, not value.

Hint 3

Whether the button is disabled is deduced from that same boolean: it does not need its own state.

App.jsx

Preview

The console is empty

Run your code with Ctrl+S

This console starts empty every time the preview loads. The browser's DevTools console keeps the messages with Preserve log.