> ## Documentation Index > Fetch the complete documentation index at: /llms.txt > Use this file to discover all available pages before exploring further. # Toggle Flip > An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family. # Toggle Flip An oversized UI toggle switch that flips with real physicality: thumb overshoot, track color crossfade, and a soft press-compress before release. The reference prop of the ui-props family. **Toggle Flip** ```html toggle-flip.html theme={null} Toggle Flip ``` Copy npx hyperframes add toggle-flip to the clipboard That writes one file: `compositions/components/toggle-flip.html`. ## Paste it into your composition Open `compositions/components/toggle-flip.html` and copy what is inside into your own composition. A component has no size or duration of its own. It takes both from the composition you paste it into. ## Variables Every one of these has a default, so the piece works untouched. Set the ones you want to change on the element: | Variable | Default | Accepts | What it does | | - | - | - | - | | `direction` | `on` | `on`, `off` | Target end state the flip lands on. | | `label` | `Auto-save` | string | Optional caption under the toggle. Blank hides the line. | | `size` | `40` | 20% to 70%, step 1% | Toggle width as a percent of the host box width. | Set them with `data-variable-values` on the element that mounts it. These are the defaults, so this behaves exactly like the preview above until you change one: ```html wrap theme={null}
``` Tagged `prop` `ui-props` `toggle` `interaction` `reference-prop` `demonstrate`. ## Related topics * [Browse the complete Catalog](/catalog.md) * [Add assets and Catalog items in the browser editor](/studio/assets-and-blocks.md) * [Put blocks together into one video](/concepts/compositions.md) ## Related topics - [Settings Toggle Flow](/catalog/components/settings-toggle-flow.md) - [Edit in the browser editor](/studio/index.md) - [3D Transitions](/catalog/blocks/transitions-3d.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.