Toggle

Installation

›pnpm dlx shadcn@latest add @evolphin/toggle

Usage

import { Toggle } from "@/components/ui/toggle";

<Toggle>Toggle</Toggle>

Type Definitions

interface ToggleProps {
  /** The controlled pressed state of the toggle */
  pressed?: boolean;   
ToggleProps.pressed?: boolean | undefined
The controlled pressed state of the toggle
  /** The default pressed state when uncontrolled */
  ?: boolean;
  /** Event handler called when the pressed state changes */
  ?: (: boolean) => void;
  /** The visual style of the toggle */
  ?: "default" | "outline";
  /** The size of the toggle */
  ?: "default" | "sm" | "lg";
}

Examples

Default

Outline

With Text

Small

Large

API Reference

Prop	Type	Default	Description
`variant`	`"default" \	"outline"`	`"default"`
`size`	`"default" \	"sm" \	"lg"`
`pressed`	`boolean`	-	The controlled pressed state of the toggle.
`defaultPressed`	`boolean`	-	The default pressed state when uncontrolled.
`onPressedChange`	`(pressed: boolean) => void`	-	Event handler called when the pressed state changes.
`disabled`	`boolean`	`false`	Whether the toggle is disabled.
`className`	`string`	-	Additional CSS classes

Search

Toggle

On this page