Toggle

A compact pressed-state control for one reversible view or formatting option.

Adopted

Family: Choice
Available import: @/components/ui/toggle
Status: Thorbis wrapper and live specimen ship here.

Live Thorbis specimentoggle

Use: Use when the selected state is visible, immediate, and can be named accessibly.
Avoid: Do not use as a commit, hide state in color alone, or confuse it with a switch.

Use this component

GitHub source links require access to the private Thorbis design repository.

Wrapper source Repository and dependencies

Value exports: Toggle
toggleVariants
Type exports: ToggleProps
ToggleSize
ToggleVariant

Setup, styles, and dependencies

These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.

Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.

For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.

Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.

Direct imports in this wrapper:

../../stylex/tokens.stylex
@radix-ui/react-toggle
@stylexjs/stylex
react

A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.

Adoption contract

Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
Use Thorbis color, type, space, radius, shadow, and motion tokens only.
Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.

Official ShadCN component directory

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

A control keeps its meaning through every state

A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.

Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.

Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.

Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.

Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.

Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better

Frequent work stays immediate; allowed motion can be interrupted

A small delay repeated through a working day becomes friction, and a transition that restarts from the wrong position disconnects feedback from input.

Apply the existing profile first: Workbench is press-only, Evidence has no motion, and other profiles remain constrained by their owner. Where a transition is already permitted, preserve continuity and the state footprint when input interrupts it.

Thorbis example. Command-menu selection follows the key immediately. A permitted popover opens from its trigger and survives open-close-open without snapping, losing focus, or changing the action label.

Verify. Repeat the interaction rapidly, switch between input methods, and test reduced motion. Compare with the nonanimated version at ordinary task speed. Use existing tokens rather than copying durations or curves from an article.

Do not import. No row stagger in routine work, delayed keyboard highlights, ornamental blur, minimum success delay, or automatic spring-library adoption.

Open the motion skill · Evidence: You Don't Need Animations; 7 Practical Animation Tips; Train Your Judgement; Details that make interfaces feel better