Switch

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

4
export default function SwitchDemo() {
5
  return (
6
    <div class="flex items-center gap-3">
7
      <Switch id="airplane-mode" />
8
      <Label for="airplane-mode">Airplane Mode</Label>
9
    </div>
10
  );
11
}

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

4
export default function SwitchDescription() {
5
  return (
6
    <Field orientation="horizontal" class="max-w-sm">
7
      <FieldContent>
8
        <FieldLabel for="switch-focus-mode">Share across devices</FieldLabel>
9
        <FieldDescription>
10
          Focus is shared across devices, and turns off when you leave the app.
11
        </FieldDescription>
12
      </FieldContent>
13
      <Switch id="switch-focus-mode" />
14
    </Field>
15
  );
16
}

1
import {
2
  Field,
3
  FieldContent,
4
  FieldDescription,
5
  FieldGroup,
6
  FieldLabel,
7
  FieldTitle,
8
} from "~/components/ui/field";
9
import { Switch } from "~/components/ui/switch";
10

11
export default function SwitchChoiceCard() {
12
  return (
13
    <FieldGroup class="w-full max-w-sm">
14
      <FieldLabel for="switch-share">
15
        <Field orientation="horizontal">
16
          <FieldContent>
17
            <FieldTitle>Share across devices</FieldTitle>
18
            <FieldDescription>
19
              Focus is shared across devices, and turns off when you leave the app.
20
            </FieldDescription>
21
          </FieldContent>
22
          <Switch id="switch-share" />
23
        </Field>
24
      </FieldLabel>
25
      <FieldLabel for="switch-notifications">
26
        <Field orientation="horizontal">
27
          <FieldContent>
28
            <FieldTitle>Enable notifications</FieldTitle>
29
            <FieldDescription>
30
              Receive notifications when focus mode is enabled or disabled.
31
            </FieldDescription>
32
          </FieldContent>
33
          <Switch id="switch-notifications" defaultChecked />
34
        </Field>
35
      </FieldLabel>
36
    </FieldGroup>
37
  );
38
}

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

4
export default function SwitchDisabled() {
5
  return (
6
    <Field orientation="horizontal" data-disabled class="w-fit">
7
      <Switch id="switch-disabled-unchecked" disabled />
8
      <FieldLabel for="switch-disabled-unchecked">Disabled</FieldLabel>
9
    </Field>
10
  );
11
}

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

4
export default function SwitchInvalid() {
5
  return (
6
    <Field orientation="horizontal" class="max-w-sm" data-invalid>
7
      <FieldContent>
8
        <FieldLabel for="switch-terms">Accept terms and conditions</FieldLabel>
9
        <FieldDescription>You must accept the terms and conditions to continue.</FieldDescription>
10
      </FieldContent>
11
      <Switch id="switch-terms" aria-invalid />
12
    </Field>
13
  );
14
}

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

4
export default function SwitchSizes() {
5
  return (
6
    <FieldGroup class="w-full max-w-40">
7
      <Field orientation="horizontal">
8
        <Switch id="switch-size-sm" size="sm" />
9
        <FieldLabel for="switch-size-sm">Small</FieldLabel>
10
      </Field>
11
      <Field orientation="horizontal">
12
        <Switch id="switch-size-default" size="default" />
13
        <FieldLabel for="switch-size-default">Default</FieldLabel>
14
      </Field>
15
    </FieldGroup>
16
  );
17
}