Toggle Group
Group of toggle buttons for single or multiple selection. Install Toggle Group from the VLLNT UI registry with the shadcn CLI.
Supported platforms:WebNative
1 storyView componentToggle
Compare Toggle for React and React Native in VLLNT UI 0.4.0. Explore source, dependencies and native capabilities. Native is source-only; npm publication is pending.
Supported platforms:WebNative
What it is and when to use
Toggle is a two-state button built on Radix UI's Toggle primitive. It flips between on and off, exposing the pressed state through data-[state=on] styling so you can theme it with Tailwind. Reach for it when a single control switches one option on or off — bold text, grid versus list view, or mute audio. It ships with default and outline variants plus small, default, and large sizes. For a set of related toggles, use Toggle Group instead.
CorePreview
Switch between light and dark to inspect the embedded Storybook preview.
Two-state toggle button. Part of the core family in VLLNT UI, it ships as a machine-readable registry entry — copy the source directly into your app with the shadcn CLI and own it, no runtime dependency on a component library.
Platform comparison
| Platform | Dependencies | Capabilities |
|---|---|---|
| Web | @vllnt/ui@^0.3.0 | Browser rendering, DOM events, and ARIA semantics |
| Native | @vllnt/ui-native, react-native | Native-adapted interaction and accessibility |
Installation
Add Toggle to your project with the shadcn CLI. The source lands in your codebase, ready to adapt:
pnpm dlx shadcn@latest add https://ui.vllnt.com/r/toggle.jsonSource
Stories
Explore every variant and state in the interactive Storybook:
FAQ
- What is Toggle?
- Toggle is a two-state button component for React, built on Radix UI's Toggle primitive. It switches a single option on or off and reflects the pressed state via data-[state=on] styling.
- How do I add Toggle?
- Run pnpm dlx shadcn@latest add https://ui.vllnt.com/r/toggle.json to copy the source into your project, then import Toggle from your ui directory.
- What variants and sizes does Toggle support?
- Toggle ships default and outline variants and three sizes — sm, default, and lg — all configured through the toggleVariants CVA helper and overridable with className.