{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "toggle-group", "type": "registry:component", "title": "Toggle group", "description": "Selects one visible option. Default joins toggles with an ink active state; subtle uses a gray rail, 3px gaps, and a soft active fill.", "registryDependencies": [ "https://vlak.dev/r/vlak-base.json", "https://vlak.dev/r/inter.json", "https://vlak.dev/r/toggle.json", "https://vlak.dev/r/vlak-lib.json" ], "dependencies": [ "@stylexjs/stylex" ], "devDependencies": [ "@stylexjs/babel-plugin" ], "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.", "files": [ { "path": "vlak/toggle-group.tsx", "content": "export { ToggleGroup, type ToggleGroupProps } from \"./toggle\";\n", "type": "registry:component", "target": "components/vlak/toggle-group.tsx" }, { "path": "vlak/styles/toggle.css", "content": "/* ── toggle: generated from packages/react/src/components/toggle.tsx ── */\n.rs-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:0.375rem;height:var(--hit);min-width:var(--hit);padding-block:0;padding-inline:1.25rem;font-size:0.8125rem;font-weight:500;letter-spacing:-0.01em;background-color:transparent;border-width:1px;border-style:solid;border-color:var(--control-border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-family:inherit;transition:var(--transition)}\n.rs-toggle:focus-visible{outline-width:2px;outline-style:solid;outline-color:var(--text);outline-offset:2px}\n@media (max-width: 640px){.rs-toggle{height:var(--hit);min-height:var(--hit);min-width:var(--hit);padding-inline:1.25rem;font-size:var(--control-fs);border-radius:var(--radius-sm)}}\n@media (hover: hover) and (pointer: fine){.rs-toggle:hover:not(:disabled):not([aria-disabled='true']){background-color:var(--control-fill);border-color:var(--control-fill);color:var(--text)}}\n@media (hover: hover) and (pointer: fine) and (forced-colors: active){.rs-toggle:hover:not(:disabled):not([aria-disabled='true']){background-color:ButtonFace;border-color:ButtonText;color:ButtonText}}\n@media (forced-colors: active){.rs-toggle{background-color:ButtonFace;border-color:ButtonText;color:ButtonText}}\n@media (prefers-reduced-motion: reduce){.rs-toggle{transition:none}}\n.rs-toggle-pressed{background-color:var(--text);border-color:var(--text);color:var(--bg);forced-color-adjust:none}\n@media (hover: hover) and (pointer: fine){.rs-toggle-pressed:hover:not(:disabled):not([aria-disabled='true']){background-color:var(--text);border-color:var(--text);color:var(--bg)}}\n@media (hover: hover) and (pointer: fine) and (forced-colors: active){.rs-toggle-pressed:hover:not(:disabled):not([aria-disabled='true']){background-color:Highlight;border-color:Highlight;color:HighlightText}}\n@media (forced-colors: active){.rs-toggle-pressed{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n.rs-toggle-subtle{background-color:transparent;border-color:transparent;cursor:pointer;opacity:1}\n.rs-toggle-subtle:disabled{cursor:not-allowed;opacity:0.5}\n@media (hover: hover) and (pointer: fine){.rs-toggle-subtle:hover:not(:disabled):not([aria-disabled='true']){background-color:transparent;border-color:transparent}}\n@media (hover: hover) and (pointer: fine) and (forced-colors: active){.rs-toggle-subtle:hover:not(:disabled):not([aria-disabled='true']){background-color:ButtonFace;border-color:ButtonText}}\n@media (forced-colors: active){.rs-toggle-subtle{background-color:ButtonFace;border-color:ButtonText}.rs-toggle-subtle:disabled{opacity:1}}\n.rs-toggle-subtle-pressed{background-color:var(--control-fill);border-color:transparent;color:var(--text);font-weight:600}\n@media (hover: hover) and (pointer: fine){.rs-toggle-subtle-pressed:hover:not(:disabled):not([aria-disabled='true']){background-color:var(--control-fill);border-color:transparent;color:var(--text)}}\n@media (hover: hover) and (pointer: fine) and (forced-colors: active){.rs-toggle-subtle-pressed:hover:not(:disabled):not([aria-disabled='true']){background-color:Highlight;border-color:Highlight;color:HighlightText}}\n@media (forced-colors: active){.rs-toggle-subtle-pressed{background-color:Highlight;border-color:Highlight;color:HighlightText}}\n.rs-toggle-group{display:inline-flex;align-items:stretch;box-sizing:border-box;min-height:calc(var(--hit) + 2 * 1px);border-width:1px;border-style:solid;border-color:var(--text);border-radius:var(--radius-sm);overflow:hidden}\n@media (max-width: 640px){.rs-toggle-group{display:flex;width:100%;border-radius:var(--radius-sm)}}\n@media (forced-colors: active){.rs-toggle-group{border-color:ButtonText}}\n.rs-toggle-grouped{height:auto;min-height:var(--hit);border-width:0;border-radius:0;margin:0;border-inline-start-width:0;border-inline-start-style:none;border-inline-start-color:transparent}\n.rs-toggle-grouped:focus-visible{outline-offset:-2px}\n.rs-toggle-grouped:not(:first-child){border-inline-start-width:1px;border-inline-start-style:solid;border-inline-start-color:var(--control-border)}\n@media (max-width: 640px){.rs-toggle-grouped{flex-grow:1}}\n.rs-toggle-grouped-on{position:relative;z-index:1}\n.rs-toggle-group-subtle{min-width:0;max-width:100%;padding:0;gap:3px;background-color:var(--table-alt);border-color:var(--divider)}\n@media (forced-colors: active){.rs-toggle-group-subtle{background-color:Canvas;border-color:ButtonText}}\n.rs-toggle-grouped-subtle{flex-grow:1;flex-shrink:1;flex-basis:auto;min-width:var(--hit);padding-inline:0.75rem;border-radius:var(--radius-sm);border-inline-start-width:0;border-inline-start-style:none;border-inline-start-color:transparent;overflow-wrap:anywhere;white-space:normal}\n.rs-toggle-grouped-subtle:first-child{border-start-start-radius:0;border-end-start-radius:0}\n.rs-toggle-grouped-subtle:last-child{border-start-end-radius:0;border-end-end-radius:0}\n.rs-toggle-grouped-subtle:not(:first-child){border-inline-start-width:0;border-inline-start-style:none;border-inline-start-color:transparent}\n@media (max-width: 640px){.rs-toggle-grouped-subtle{flex-basis:0;min-width:var(--hit);padding-inline:0.625rem;border-radius:var(--radius-sm)}}\n", "type": "registry:file", "target": "styles/vlak/toggle.css" } ], "meta": { "vlak": { "category": "actions", "classes": [ "rs-toggle-group", "rs-toggle-group-subtle" ], "snippet": "
\n
", "cssOnly": false, "registryDependencies": [ "toggle", "vlak-lib" ], "aliases": [ "Toggle group", "Segmented control", "Exclusive toggles", "Subtle toggle group" ], "example": "import { useState } from \"react\";\nimport { ToggleGroup } from \"@noorddev/vlak-react\";\n\nconst [align, setAlign] = useState(\"left\");\n\n", "usage": { "use": [ "One of two to five options that should all stay visible: alignment, view mode, period.", "Default for joined controls with hairline seams. Subtle uses a soft rail, 3px inset and gaps, 4px corners, and a soft active fill without internal strokes.", "Short labels of equal weight." ], "avoid": [ "Many or long options; use Select.", "Multiple selection; use several Toggle buttons." ] }, "keyboard": [ { "keys": "Tab", "does": "Moves between the options" }, { "keys": "Enter, Space", "does": "Selects the focused option" } ], "a11y": [ "Renders role=\"group\" of native buttons with aria-pressed; pass aria-label to name the group.", "Controlled with value and onValueChange, or uncontrolled with defaultValue.", "Both variants retain a minimum 44px target per option and a visible keyboard focus ring. Tab visits each button; arrow keys do not change selection." ] } } }