Switch

Controlled state

State via bind:pressed and a text hint next to the switch.

tsx

import { useSignal } from "@builder.io/qwik";
import { Switch } from "~/components/ui/base/switch";

export default component$(() => {
  const on = useSignal(false);
  return (
    <Switch
      bind:pressed={on}
      aria-label="Notifications"
    />
  );
});

Default value and disabled

Visible labels via Label in a row with the switch (flex).

On by default

Inactive

tsx

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

<div class="flex max-w-md flex-col gap-4">
  <div class="flex items-center justify-between gap-4">
    <Label for="demo-sw-on">On by default</Label>
    <Switch id="demo-sw-on" pressed />
  </div>
  <div class="flex items-center justify-between gap-4">
    <Label class="text-secondary-label" for="demo-sw-off">Inactive</Label>
    <Switch id="demo-sw-off" disabled />
  </div>
</div>

Metadata

Source: meta.generated.json (see npm run generate)

File base/switch/meta.generated.json not found or path not allowed.