Switch

<script setup>
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <Switch.Root class="setting" default-checked>
    <Switch.Label class="setting__copy">
      <span class="setting__title">Share across devices</span>
      <span class="setting__description">
        Keep preferences synchronized on signed-in devices.
      </span>
    </Switch.Label>
    <Switch.Control />
  </Switch.Root>
</template>

<style scoped>
.setting {
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
}

.setting__copy {
  display: grid;
  gap: 0.125rem;
}

.setting__title {
  font-weight: 600;
}

.setting__description {
  color: var(--kappa-subtle, #6c7480);
  font-size: 0.75rem;
  font-weight: 400;
}
</style>

<script setup>
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <Switch.Root class="choice-card" default-checked>
    <Switch.Label class="choice-card__copy">
      <span class="choice-card__title">Enable notifications</span>
      <span class="choice-card__description">
        Receive a message when important activity needs attention.
      </span>
    </Switch.Label>
    <Switch.Control />
  </Switch.Root>
</template>

<style scoped>
.choice-card {
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.875rem;
  border: 1px solid var(--kappa-line, #e3e6eb);
  border-radius: 0.625rem;
}

.choice-card:has([data-state="checked"]) {
  border-color: var(--kappa-accent, #4356e8);
}

.choice-card__copy {
  display: grid;
  gap: 0.25rem;
}

.choice-card__title {
  font-weight: 600;
}

.choice-card__description {
  color: var(--kappa-subtle, #6c7480);
  font-size: 0.75rem;
  font-weight: 400;
}
</style>

<script setup>
import { ref } from "vue";
import { Switch } from "@dicehub/kappa/components/switch";

const focusMode = ref(true);
</script>

<template>
  <Switch.Root v-model:checked="focusMode">
    <Switch.Control />
    <Switch.Label>Focus mode</Switch.Label>
  </Switch.Root>
  <output aria-live="polite">State: {{ focusMode ? "on" : "off" }}</output>
</template>

<script setup>
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <Switch.Root default-checked>
    <Switch.Control />
    <Switch.Label>
      Wi-Fi
      <Switch.Context v-slot="{ checked }">
        <span>{{ checked ? "On" : "Off" }}</span>
      </Switch.Context>
    </Switch.Label>
  </Switch.Root>
</template>

<script setup>
import { Field } from "@dicehub/kappa/components/field";
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <Switch.Root disabled>
    <Switch.Control />
    <Switch.Label>Disabled</Switch.Label>
  </Switch.Root>

  <Switch.Root disabled default-checked>
    <Switch.Control />
    <Switch.Label>Disabled and on</Switch.Label>
  </Switch.Root>

  <Switch.Root read-only default-checked>
    <Switch.Control />
    <Switch.Label>Read-only</Switch.Label>
  </Switch.Root>

  <Field.Root id="terms" invalid>
    <Switch.Root invalid required>
      <Switch.Control />
      <Switch.Label>Accept the terms</Switch.Label>
    </Switch.Root>
    <Field.ErrorText>You must accept the terms to continue.</Field.ErrorText>
  </Field.Root>
</template>

<script setup>
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <Switch.Root size="sm" default-checked>
    <Switch.Control />
    <Switch.Label>Small</Switch.Label>
  </Switch.Root>
  <Switch.Root size="base" default-checked>
    <Switch.Control />
    <Switch.Label>Base</Switch.Label>
  </Switch.Root>
  <Switch.Root size="lg" default-checked>
    <Switch.Control />
    <Switch.Label>Large</Switch.Label>
  </Switch.Root>
</template>

<script setup>
import { ref } from "vue";
import { Button } from "@dicehub/kappa/components/button";
import { Switch } from "@dicehub/kappa/components/switch";

const result = ref("Submit the form to inspect its value.");
const handleSubmit = (event) => {
  const data = new FormData(event.currentTarget);
  result.value = data.has("product-updates")
    ? "Product updates enabled"
    : "Product updates disabled";
};
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <Switch.Root name="product-updates" value="enabled" default-checked>
      <Switch.Control />
      <Switch.Label>Product updates</Switch.Label>
    </Switch.Root>
    <Button type="submit">Save preferences</Button>
    <output aria-live="polite">{{ result }}</output>
  </form>
</template>

<script setup>
import { Switch } from "@dicehub/kappa/components/switch";
</script>

<template>
  <div dir="rtl" lang="ar">
    <Switch.Root dir="rtl" default-checked>
      <Switch.Control />
      <Switch.Label>تفعيل الإشعارات</Switch.Label>
    </Switch.Root>
  </div>
</template>