ActionsLiquid Glass
Toggle Group
Capsule container for exclusive or multi-select toggles. Preview live, copy the source, or install with the CLI into your Next.js project.
Install
npx @intellihelper/cli@latest add toggle-groupToggle group
About this component
Toggle Group is part of Actions. Capsule container for exclusive or multi-select toggles.
Install with npx @intellihelper/cli@latest add toggle-group. Files land in your project so you can customize styles, variants, and behavior without a locked package.
Prefer AI-assisted install? Use the agent plugin or the MCP server.
When to use Toggle Group
Use when
- Use Toggle Group when capsule container for exclusive or multi-select toggles.
- Primary and secondary actions in product chrome or content panels.
- Copy, theme, or toggle interactions that should feel native to Liquid Glass.
Avoid when
- Navigation between major app sections — prefer links or navigation components.
- Destructive multi-step workflows without confirmation (pair with alert-dialog).
Accessibility notes
- Buttons must remain keyboard focusable with a visible focus ring.
- Disabled actions should use disabled semantics, not click handlers that no-op.
- Icon-only buttons require an accessible name.
Interactive primitives build on accessible patterns (including Radix where applicable). Always verify focus order and contrast on your mesh or product background.
Composition tips
- Use content-layer variants for primary CTAs; chrome variants for toolbars.
- Group related actions with consistent size and shape (pill vs rounded).