Switch

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download switch -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { Switch } from "@/components/ui/switch";
import { reactive } from "vue";
import * as UI from "@/components/ui/switch";

const Component = UI.Switch;

const args = reactive(
  {
    "checked": false,
    "disabled": false,
  } satisfies Partial<
    InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
  > &
    Record<string, unknown>,
);
</script>

<template>
  <Switch v-model="args.checked" :disabled="args.disabled" />
</template>

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@/components/ui/switch";
import * as UI from "@/components/ui/switch";

const Component = UI.Switch;

const args = {
  "checked": undefined,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const checked = ref(args.checked ?? false);
</script>

<template>
  <Switch v-bind="args" v-model="checked" />
</template>

Disabled

<script setup lang="ts">
import { Switch } from "@/components/ui/switch";
import * as UI from "@/components/ui/switch";

const Component = UI.Switch;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <Switch disabled />
</template>

With Label

<script setup lang="ts">
import { ref } from "vue";
import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label";
import * as UI from "@/components/ui/switch";

const Component = UI.Switch;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
const checked = ref(false);
</script>

<template>
  <div class="flex items-center space-x-2">
    <Switch id="airplane-mode" v-model="checked" /><Label for="airplane-mode"
      >Airplane Mode</Label
    >
  </div>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.