13 Nov 2026

WSwitch example

A controlled toggle with a checked: state.

WDiv
WText
WSwitch

preview

example_w_switch.dart

WDiv(
  className: "w-full flex flex-row items-center justify-between p-4",
  children: [
    WDiv(
      className: "flex flex-col gap-1",
      children: [
        WText("Focus mode", className: "text-xl font-semibold text-[#cdd9e5]"),
        WText("A little less noise.", className: "text-lg text-[#adbac7]"),
      ],
    ),
    WSwitch(
      value: true,
      className: "w-14 h-8 px-1 bg-[#2d333b] border border-[#539bf5] rounded-full checked:justify-end",
      thumbClassName: "w-6 h-6 rounded-full bg-[#539bf5]",
    ),
  ],
)

17 lines Open in the playground From the docs: WSwitch