Snippet Controlled 1 - Controlled tabs

Basic

Snippet with value and onValueChange controlled by external buttons.
Shadcn Snippet Controlled 1 component

Component data

ID
snippet/snippet-controlled-1
Access
basic
Created
May 23, 2026
Type
example
Libraries
Radix UI, Base UI, React Aria

Snippet Controlled 1 component design & features

This example controls the Snippet active tab with React state via value and onValueChange. External buttons above the snippet also set the tab, demonstrating sync between outside controls and the snippet tabs.

Controlled snippets fit package manager selectors and download pages where tab state must stay in sync with other UI elements on the same screen.