Events and inputs

Event handlers are props that start with on: onClick, onInput, onSubmit. A handler is the natural place to write a signal.

For a form field, keep its value in a signal. Write it from onInput, using event.currentTarget, the element the handler is attached to:

<input value={name()} onInput={(event) => setName(event.currentTarget.value)} />

Checkboxes report checked instead of value. A form's onSubmit should call event.preventDefault() so the browser doesn't reload the page.

Derive everything else from those signals. Whether the button is enabled is a derived value, not a third signal.

Try it: wire the name field and the checkbox to their signals. Enable Sign up only when a name is entered and the box is checked. On submit, show "Welcome, name!".