Toggle

A two-state button that can be either on or off.

View code

Features

Install the component from your command line.

$ npm add reka-ui

Import the component.

vue

<script setup>
import { Toggle } from 'reka-ui'
</script>

<template>
  <Toggle />
</template>

The toggle.

Prop	Default	Type
`as`	`'button'`	`AsTag \| Component` The element or component this component should render as. Can be overwritten by `asChild`.
`asChild`		`boolean` Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
`defaultValue`		`boolean` The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
`disabled`	`false`	`boolean` When `true`, prevents the user from interacting with the toggle.
`modelValue`		`boolean \| null` The controlled pressed state of the toggle. Can be bind as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.

Emit	Payload
`update:modelValue`	`[value: boolean]` Event handler called when the value of the toggle changes.

Slots (default)	Payload
`modelValue`	`boolean` Current pressed state

Data Attribute	Value
`[data-state]`	`"on" \| "off"`
`[data-disabled]`	Present when disabled

Key	Description
`Space`	Activates/deactivates the toggle.
`Enter`	Activates/deactivates the toggle.