Clicking on the Switch component does nothing in Solid JS

[jackvane]

Current Version: "@ark-ui/solid": "^3.4.1"

When assigning controlled state to the switch, clicking on the switch does not change state. If you remove all props from the Switch component, clicking on the switch still does nothing.

import { action, useSubmission } from "@solidjs/router";
import { Show, createEffect, createSignal } from "solid-js";
import { Switch } from "~/components/ui/switch";

const login = action(async (formData: FormData) => {
  "use server";

  ...

}, "login");

export default function Page() {
  const [showPlainText, setShowPlainText] = createSignal<boolean>(false);

  return (
    <>
      <div>
        <form action={login} class="space-y-8" method="post">

...

          <div>
            <Switch
              size="sm"
              checked={showPlainText()}
              onCheckedChange={e => {
                console.log(e.checked); // does nothing
                setShowPlainText(e.checked); // does nothing
              }}
            >
              Show One Time Password
            </Switch>
          </div>

          <Button type="submit">Sign in with One Time Password</Button>
        </form>
      </div>
    </>
  );
}

I am using the default switch as per the docs:

import { Switch as ArkSwitch, type SwitchRootProps } from "@ark-ui/solid";
import { Show, children, splitProps } from "solid-js";
import { type VariantProps, tv } from "tailwind-variants";

export interface SwitchProps extends SwitchRootProps, SwitchVariantProps {}

export const Switch = (props: SwitchProps) => {
  const [variantProps, switchProps] = splitProps(props, ["size", "class"]);
  const [localProps, rootProps] = splitProps(switchProps, ["children"]);
  const getChildren = children(() => localProps.children);
  const { root, control, label, thumb } = styles(variantProps);

  return (
    <ArkSwitch.Root class={root()} {...rootProps}>
      <ArkSwitch.Control class={control()}>
        <ArkSwitch.Thumb class={thumb()} />
      </ArkSwitch.Control>
      <Show when={getChildren()}>
        <ArkSwitch.Label class={label()}>{getChildren()}</ArkSwitch.Label>
      </Show>
    </ArkSwitch.Root>
  );
};

type SwitchVariantProps = VariantProps<typeof styles>;

const styles = tv(
  {
    base: "switchRecipe",
    defaultVariants: { size: "md" },
    slots: {
      root: "switchRecipe__root",
      label: "switchRecipe__label",
      control: "switchRecipe__control",
      thumb: "switchRecipe__thumb"
    },
    variants: {
      size: {
        sm: {
          root: "switchRecipe__root--size_sm",
          label: "switchRecipe__label--size_sm",
          control: "switchRecipe__control--size_sm",
          thumb: "switchRecipe__thumb--size_sm"
        },
        md: {
          root: "switchRecipe__root--size_md",
          label: "switchRecipe__label--size_md",
          control: "switchRecipe__control--size_md",
          thumb: "switchRecipe__thumb--size_md"
        },
        lg: {
          root: "switchRecipe__root--size_lg",
          label: "switchRecipe__label--size_lg",
          control: "switchRecipe__control--size_lg",
          thumb: "switchRecipe__thumb--size_lg"
        }
      }
    }
  },
  { twMerge: false }
);

[dannylin108]

I use onChange, not onCheckedChange and it works

const HSwitch = () => {
    const { t } = useLocale()!;
    const { settings, setSettings } = useAppSettings()!;

    return <HStack justifyContent='space-between'>
        <Text fontWeight='medium'>{t.settings.h24()}</Text>
        <Switch checked={settings.time24h}
            onChange={() => setSettings('time24h', !settings.time24h)}
        />
    </HStack>;
}

[Lenstack]

Add <ArkSwitch.HiddenInput/> to

[spd789562]

Yes, a lot of form base component rely on Ark's input, and it not on Park UI docuument, if some component not even working, just check Ark UI document, it would help a lot cuz Park UI rely on it like https://ark-ui.com/solid/docs/components/switch