How to toggle checkbox with disabled JavaScript in RemixJS

Question

Tl, Dr; I want to toggle and submit <input type="checkbox" /> without <button type="submit">

In ReactJS with enabled JavaScript, I can toggle and submit form with onChange. There is no need to use <button type="submit">

const toggleStatus = () => {/*...*/};

return (
  <Form>
    <input type="checkbox" role="switch" id="switch" checked onChange={toggleStatus} />
    <label for="switch">Activate/Deactivate</label>
  </Form>
)

If I want to use toggle but with disabling JavaScript. Is there any method to submit formData since JavaScript is disabled?

It doesn't make sense when user toggles and has to submit form again. (User Experience)

P.S. I've been thinking about using <button> instead of <input type="checkbox" /> as a toggle switch but I'm not sure.

Sergio Xalambrí · Accepted Answer · 2025-04-15 07:53:55Z

0

There's no way to trigger a form submission from the change event of a checkbox without JS.

Making the checkbox actually be a button can be a simple way to solve this. But not the most accessible.

I would consider if it's actually possible users will disable JS, and if it is common for your app to have this kind of users, then you can use the <noscript> tag to render a button only for users with JS disabled.

Note that this will not render the button if JS is enabled but hasn't loaded yet.

answered Apr 15 at 7:53

Sergio Xalambrí

1,2109 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MPK May 2 at 13:51

Thanks, I've also got an idea from shadcn/ui (aka Radix). They use button instead of checkbox.

Collectives™ on Stack Overflow

How to toggle checkbox with disabled JavaScript in RemixJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related