ToastToggle Group
Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Controlled Input
Field Arrays
Submit
Validation

Toggle

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

default
outline
default
sm
lg

#Installation

bunx --bun barefoot add toggle

#Usage

1import { Toggle } from "@/components/ui/toggle"23function ToggleDemo() {4  return (5    <div className="flex flex-wrap items-center gap-2">6      <Toggle>Default</Toggle>7      <Toggle variant="outline">Outline</Toggle>8      <Toggle size="sm">Small</Toggle>9      <Toggle size="lg">Large</Toggle>10      <Toggle defaultPressed>Pressed</Toggle>11      <Toggle disabled>Disabled</Toggle>12    </div>13  )14}

#Examples

#Basic

1import { Toggle } from "@/components/ui/toggle"23export function ToggleBasicDemo() {4  return (5    <div className="flex items-center gap-2">6      <Toggle aria-label="Toggle bold">7        <BoldIcon />8      </Toggle>9      <Toggle defaultPressed aria-label="Toggle italic">10        <ItalicIcon />11      </Toggle>12      <Toggle disabled aria-label="Toggle underline">13        <UnderlineIcon />14      </Toggle>15    </div>16  )17}

#Outline

1import { Toggle } from "@/components/ui/toggle"23export function ToggleOutlineDemo() {4  return (5    <div className="flex items-center gap-2">6      <Toggle variant="outline" aria-label="Toggle bold">7        <BoldIcon />8      </Toggle>9      <Toggle variant="outline" aria-label="Toggle italic">10        <ItalicIcon />11      </Toggle>12      <Toggle variant="outline" aria-label="Toggle underline">13        <UnderlineIcon />14      </Toggle>15    </div>16  )17}

#Toolbar

Active formatting: None (0 selected) 
1"use client"23import { createSignal, createMemo } from "@barefootjs/dom"4import { Toggle } from "@/components/ui/toggle"56const formatOptions = [7  { id: 0, name: 'Bold', label: 'Toggle bold' },8  { id: 1, name: 'Italic', label: 'Toggle italic' },9  { id: 2, name: 'Underline', label: 'Toggle underline' },10]1112export function ToggleToolbarDemo() {13  const [active, setActive] = createSignal(formatOptions.map(() => false))1415  const activeCount = createMemo(() => active().filter(Boolean).length)16  const activeNames = createMemo(() =>17    formatOptions.filter((_, i) => active()[i]).map(o => o.name).join(', ') || 'None'18  )1920  const toggleFormat = (index: number) => {21    setActive(prev => prev.map((v, i) => i === index ? !v : v))22  }2324  return (25    <div className="space-y-4">26      <div className="flex items-center gap-1 rounded-md border border-input p-1">27        {formatOptions.map((option) => (28          <Toggle29            key={option.id}30            pressed={active()[option.id]}31            onPressedChange={() => toggleFormat(option.id)}32            size="sm"33            aria-label={option.label}34          >35            <Icon />36          </Toggle>37        ))}38      </div>39      <div className="text-sm text-muted-foreground">40        Active formatting: {activeNames()} ({activeCount()} selected)41      </div>42    </div>43  )44}

#API Reference

PropTypeDefaultDescription
defaultPressedbooleanfalseThe initial pressed state for uncontrolled mode.
pressedboolean-The controlled pressed state of the toggle. When provided, the component is in controlled mode.
disabledbooleanfalseWhether the toggle is disabled.
variant'default' | 'outline''default'The visual variant of the toggle.
size'default' | 'sm' | 'lg''default'The size of the toggle.
onPressedChange(pressed: boolean) => void-Event handler called when the toggle state changes.