Switch Ball

<BaseSwitchBall /> · A fancy togglable checkbox.

Label

vue

<template>
  <BaseSwitchBall
    v-model="value"
    label="Label"
  />
</template>

<script setup lang="ts">
const value = true
</script>

Features

Full keyboard navigation
Can be controlled or uncontrolled

Anatomy

This is a self closing component that can be used to display a fancy togglable checkbox.

vue

<template>
  <BaseSwitchBall />
</template>

API Reference

This component has props that you can use to modify its visual style and behavior.

Model	Type
`model-value`	`boolean \| null` The controlled state of the switch. Can be bind as `v-model`.

Prop	Type
`label` default:`-`	`string` Accessible label for the switch.
`sublabel` default:`-`	`string` The sublabel of the switch.
`variant` default:`"default"`	`"default" \| "primary" \| "dark" \| "none"` Main color of the switch.
`classes` default:`{}`	`{ root?: string \| string[]; thumb?: string \| string[]; track?: string \| string[]; icon?: string \| string[]; label?: string \| string[]; }` Optional classes to pass to the inner components.
`default-value` default:`-`	`boolean` The state of the switch when it is initially rendered. Use when you do not need to control its state.
`disabled` default:`-`	`boolean` When `true`, prevents the user from interacting with the switch.
`id` default:`-`	`string`
`value` default:`-`	`string` The value given as data when submitted with a `name`.
`as-child` default:`-`	`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as` default:`-`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`name` default:`-`	`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required` default:`-`	`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Slot	Type
`#default`	`any`
`#sublabel`	`any`

Customization

Your can override the component default CSS variables in your main.css file.

css

@theme {
  /* Switch default variables */
  --color-track-default-bg: var(--color-muted-200);
  --color-track-default-bg-active: var(--color-muted-500);
  --color-track-default-bg-invert: var(--color-white);
  --color-track-default-handle-bg: var(--color-white);
  --color-track-default-handle-border: var(--color-muted-300);
  --color-track-default-handle-ring: var(--color-track-default-bg-active);

  /* Switch dark variables */
  --color-track-dark-bg: var(--color-muted-200);
  --color-track-dark-bg-active: var(--color-muted-900);
  --color-track-dark-bg-invert: var(--color-white);
  --color-track-dark-handle-bg: var(--color-white);
  --color-track-dark-handle-border: var(--color-muted-300);
  --color-track-dark-handle-ring: var(--color-track-dark-bg-active);
}

Examples

Variants

Use the variant prop to change the color of the switch.

Default Primary Dark

vue

<template>
  <BaseSwitchBall
    v-model="ballValues.one"
    variant="default"
  >
    Default
  </BaseSwitchBall>
  <BaseSwitchBall
    v-model="ballValues.two"
    variant="primary"
  >
    Primary
  </BaseSwitchBall>
  <BaseSwitchBall
    id="dark"
    v-model="ballValues.three"
    variant="dark"
  >
    Dark
  </BaseSwitchBall>
</template>

<script setup lang="ts">
const ballValues = reactive({
  one: true,
  two: true,
  three: true,
})
</script>

Custom variants

Set the variant prop to none to remove the default styles and create your own.

Custom Custom Custom Custom

vue

<template>
  <BaseSwitchBall
    v-model="ballValues.one"
    variant="none"
    class="*:first:bg-white *:first:dark:bg-muted-700 *:first:border *:first:border-muted-300 *:first:dark:border-muted-600 *:last:text-white *:last:dark:text-white *:peer-data-[state=checked]:bg-green-500 *:dark:peer-data-[state=checked]:bg-green-500 *:bg-muted-300 *:dark:bg-muted-600"
  >
    Custom variant
  </BaseSwitchBall>
  <BaseSwitchBall
    v-model="ballValues.two"
    variant="none"
    class="*:first:bg-white *:first:dark:bg-muted-700 *:first:border *:first:border-muted-300 *:first:dark:border-muted-600 *:last:text-white *:last:dark:text-white *:peer-data-[state=checked]:bg-pink-500 *:dark:peer-data-[state=checked]:bg-pink-500 *:bg-muted-300 *:dark:bg-muted-600"
  >
    Custom variant
  </BaseSwitchBall>
  <BaseSwitchBall
    v-model="ballValues.three"
    variant="none"
    class="*:first:bg-white *:first:dark:bg-muted-700 *:first:border *:first:border-muted-300 *:first:dark:border-muted-600 *:last:text-white *:last:dark:text-white *:peer-data-[state=checked]:bg-amber-500 *:dark:peer-data-[state=checked]:bg-amber-500 *:bg-muted-300 *:dark:bg-muted-600"
  >
    Custom variant
  </BaseSwitchBall>
  <BaseSwitchBall
    v-model="ballValues.four"
    variant="none"
    class="*:first:bg-white *:first:dark:bg-muted-700 *:first:border *:first:border-muted-300 *:first:dark:border-muted-600 *:last:text-white *:last:dark:text-white *:peer-data-[state=checked]:bg-violet-500 *:dark:peer-data-[state=checked]:bg-violet-500 *:bg-muted-300 *:dark:bg-muted-600"
  >
    Custom variant
  </BaseSwitchBall>
</template>

<script setup lang="ts">
const ballValues = reactive({
  one: true,
  two: true,
  three: true,
  four: true,
})
</script>

Sublabel

Use the sublabel prop to add a sublabel to the switch.

PrimaryThis is a primary switch

vue

<template>
  <BaseSwitchBall
    v-model="value"
    label="Primary"
    sublabel="This is a primary switch"
    color="primary"
  />
</template>

<script setup lang="ts">
const value = ref(true)
</script>

Snack

Switch Thin

Edit this page on Github