Switch

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import * as SwitchPrimitive from "@kobalte/core/switch";
3
import { type ComponentProps, mergeProps, splitProps, type ValidComponent } from "solid-js";
4

5
import { cn } from "~/lib/utils";
6

7
type SwitchProps<T extends ValidComponent = "div"> = PolymorphicProps<
8
  T,
9
  SwitchPrimitive.SwitchRootProps<T>
10
> &
11
  Pick<ComponentProps<T>, "class" | "children"> & {
12
    size?: "sm" | "default";
13
  };
14

15
const Switch = <T extends ValidComponent = "div">(props: SwitchProps<T>) => {
16
  const mergedProps = mergeProps({ size: "default" as const }, props);
17
  const [local, others] = splitProps(mergedProps as SwitchProps, ["class", "size", "id"]);
18
  return (
19
    <SwitchPrimitive.Root
20
      data-slot="switch"
21
      data-size={local.size}
22
      class={cn(
23
        "peer group/switch relative z-switch inline-flex items-center outline-none transition-all data-disabled:cursor-not-allowed data-disabled:opacity-50",
24
        local.class,
25
      )}
26
      {...others}
27
    >
28
      <SwitchPrimitive.Input data-slot="switch-input" class="peer sr-only" id={local.id} />
29
      <SwitchPrimitive.Control
30
        data-slot="switch-control"
31
        class="relative z-switch-control inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors data-disabled:cursor-not-allowed"
32
      >
33
        <SwitchPrimitive.Thumb
34
          data-slot="switch-thumb"
35
          class="pointer-events-none z-switch-thumb block rounded-full ring-0 transition-transform"
36
        />
37
      </SwitchPrimitive.Control>
38
    </SwitchPrimitive.Root>
39
  );
40
};
41

42
export { Switch };

import { Field, FieldLabel } from "~/components/ui/field";
import { Switch } from "~/components/ui/switch";

function SwitchBasic() {
  return (
    <Example title="Basic">
      <Field orientation="horizontal">
        <Switch id="switch-basic" />
        <FieldLabel for="switch-basic">Airplane Mode</FieldLabel>
      </Field>
    </Example>
  );
}

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldTitle,
} from "~/components/ui/field";
import { Switch } from "~/components/ui/switch";

function SwitchWithDescription() {
  return (
    <Example title="With Description">
      <FieldLabel for="switch-focus-mode">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldTitle>Share across devices</FieldTitle>
            <FieldDescription>
              Focus is shared across devices, and turns off when you leave the app.
            </FieldDescription>
          </FieldContent>
          <Switch id="switch-focus-mode" />
        </Field>
      </FieldLabel>
    </Example>
  );
}

import { Label } from "~/components/ui/label";
import { Switch } from "~/components/ui/switch";

function SwitchDisabled() {
  return (
    <Example title="Disabled">
      <div class="flex flex-col gap-12">
        <div class="flex items-center gap-2">
          <Switch id="switch-disabled-unchecked" disabled />
          <Label for="switch-disabled-unchecked">Disabled (Unchecked)</Label>
        </div>
        <div class="flex items-center gap-2">
          <Switch id="switch-disabled-checked" defaultChecked disabled />
          <Label for="switch-disabled-checked">Disabled (Checked)</Label>
        </div>
      </div>
    </Example>
  );
}

import { Label } from "~/components/ui/label";
import { Switch } from "~/components/ui/switch";

function SwitchSizes() {
  return (
    <Example title="Sizes">
      <div class="flex flex-col gap-12">
        <div class="flex items-center gap-2">
          <Switch id="switch-size-sm" size="sm" />
          <Label for="switch-size-sm">Small</Label>
        </div>
        <div class="flex items-center gap-2">
          <Switch id="switch-size-default" size="default" />
          <Label for="switch-size-default">Default</Label>
        </div>
      </div>
    </Example>
  );
}