How do you use a Switch inside a form?

[fillon]

Hi,

First of all, congratulations for this great library... learning a lot.

Where can I find some examples using a Switch component inside a form.

I must be missing something, I can't get the Switch value after a submit.

Below, I would like to trigger a submit when the Switch value change (like in a Preferences page)... but type='submit' is not triggered.

Thanks for any ideas :-)

import React, { useState } from "react";
import { Switch } from "@headlessui/react";

export default function () {
  const [switchValue, setSwitchValue] = useState(false);

  return (
    <div className="flex items-center justify-center p-12">
      <div className="w-full max-w-xs mx-auto">
        <form method="post">
          <Switch.Group as="div" className="flex items-center space-x-4">
            <Switch.Label>Enable notifications</Switch.Label>
            <Switch
              // as="button"
              type="submit"
              checked={switchValue}
              onChange={setSwitchValue}
              className={`${
                switchValue ? "bg-indigo-600" : "bg-gray-400"
              } relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline`}
            >
              {({ checked }) => (
                <span
                  className={`${
                    checked ? "translate-x-5" : "translate-x-0"
                  } inline-block w-5 h-5 transition duration-200 ease-in-out transform bg-white rounded-full`}
                />
              )}
            </Switch>
          </Switch.Group>
        </form>
      </div>
    </div>
  );
}

[mohammadzolfali]

***@***.*** در تاریخ چهارشنبه ۲۳ فوریهٔ ۲۰۲۲،‏ ۷:۵۲ fillon ***@***.***> نوشت:

…

Hi, First of all, congratulations for this great library... learning a lot. Where can I find some examples using a Switch component inside a form. I must be missing something, I can't get the Switch value after a submit. Below, I would like to trigger a submit when the Switch value change (like in a Preferences page)... but type='submit' is not triggered. Thanks for any ideas :-) import React, { useState } from "react"; import { Switch } from ***@***.***/react"; export default function () { const [switchValue, setSwitchValue] = useState(false); return ( <div className="flex items-center justify-center p-12"> <div className="w-full max-w-xs mx-auto"> <form method="post"> <Switch.Group as="div" className="flex items-center space-x-4"> <Switch.Label>Enable notifications</Switch.Label> <Switch // as="button" type="submit" checked={switchValue} onChange={setSwitchValue} className={`${ switchValue ? "bg-indigo-600" : "bg-gray-400" } relative inline-flex flex-shrink-0 h-6 transition-colors duration-200 ease-in-out border-2 border-transparent rounded-full cursor-pointer w-11 focus:outline-none focus:shadow-outline`} > {({ checked }) => ( <span className={`${ checked ? "translate-x-5" : "translate-x-0" } inline-block w-5 h-5 transition duration-200 ease-in-out transform bg-white rounded-full`} /> )} </Switch> </Switch.Group> </form> </div> </div> ); } — Reply to this email directly, view it on GitHub <#1134>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ATMIVVXPGBVDZTLOWSFUICTU4ROIFANCNFSM5PDH4W5Q> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>