build69
build69  /  Components  /  Selection & Choice  /  ToggleMenu

ToggleMenu

v1.0.8NewUpdated 27 Aug 2026

Dropdown panel of Switch rows. Description + leading-icon slots per item, grouping with separators, per-item async loading spinner, "Reset to defaults" footer wired to defaultValues, and an "N changed" indicator.

Preview

Live · 12 stories
DefaultOpen ↗
Why this is recommendedformswitchtoggledropdown+5

The default, out-of-the-box ToggleMenu.

Recommended for+14
  • Notification-preference menus
  • Feature-flag toggles
  • Display / privacy settings dropdowns
Tags+6
formswitchtoggledropdownmenupreferencessettingspopoverdefault
Features+4
  • Switch rows with label + description
  • Leading-icon slot per item
  • Grouping with section separators
  • Per-item loading spinner
  • Reset-to-defaults footer (defaultValues map)
  • "N changed" indicator
  • Open-on-toggle (closeOnSelect=false default)
Not recommended for−2
  • Multi-select with values (use ChecklistMenu)
  • Single boolean (use Switch)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "ToggleMenu" })

Usage

import { ToggleMenu } from '@/components/inputs/toggle-menu';

<ToggleMenu
  items={prefs}
  values={state}
  onValuesChange={setState}
  defaultValues={defaults}
  showResetAll
  triggerLabel="Preferences"
/>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
items

Toggle items (with optional group / icon)

ToggleMenuItem[]yes
values

Current toggle state

Record<string, boolean>yes
onValuesChange

State callback

functionyes
defaultValues

Reset-target state

Record<string, boolean>
showResetAll

Show reset-to-defaults footer

boolean
trigger

Custom trigger

ReactNode
triggerVariant

Default trigger styling

'default' | 'outline' | 'ghost' | 'subtle'
groupOrder

Explicit group order

string[]

Related