Preview

Installation

npx sigma-ui@latest add toggle

Usage

<script setup lang="ts">
import { Toggle } from '@/components/ui/toggle';
</script>

<template>
  <Toggle aria-label="Toggle bold">
    Bold
  </Toggle>
</template>

• Use v-model to control the pressed state, or defaultValue for an uncontrolled toggle.
• variant is default or outline, and size is default, sm, or lg.

Examples

Default

Outline

With Text

Small

Large

Disabled

API Reference

Toggle

Props

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

Events

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

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Follows the toggle button variant of the Button WAI-ARIA design pattern. Reka UI renders a button with aria-pressed. Set aria-label when the toggle only contains an icon.

Key	Description
Tab	Moves focus to the toggle.
Space	Toggles the pressed state.
Enter	Toggles the pressed state.