{"name":"toggle","title":"Toggle","description":"A two-state button that can be either on or off.","installCommand":"bunx marko-ui add toggle -y","usageTags":"<Toggle>","importSnippet":"import Toggle from \"@/components/ui/toggle/toggle.marko\";","usageSnippet":"<Toggle>Toggle</Toggle>","tags":["Toggle"],"parts":[],"props":[{"name":"pressed","type":"boolean","required":false},{"name":"size","type":"'default' | 'sm' | 'lg' | null | undefined","required":false,"default":"default"},{"name":"variant","type":"'default' | 'outline' | null | undefined","required":false,"default":"default"}],"events":[{"name":"pressedChange","arg":"boolean"}],"keyboard":[{"keys":"Tab / Shift+Tab","description":"Moves focus to and from the toggle."},{"keys":"Space / Enter","description":"Toggles the pressed state."}],"accessibilityNotes":["Toggle renders as a native `<button type=\"button\">` with `aria-pressed` reflecting its toggled state, so assistive tech announces the control and its state without extra ARIA wiring — always pass `aria-label` (or wrap it with a visible label) since Toggle has no built-in accessible name of its own.","Disabling a toggle removes it from the tab order and blocks pointer input.","Icon-only toggles (an icon with no visible text, e.g. the RTL example's icon+label pared down to just the icon) need an explicit `aria-label` — the icon alone gives assistive tech nothing to announce."],"examples":[{"id":"toggle-demo","title":"Default","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\n\n<Toggle aria-label=\"Toggle italic\">Italic</Toggle>","description":"A plain toggle button, off until clicked."},{"id":"toggle-controlled","title":"Controlled","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\n\n<let/pressed=true/>\n\n<div class=\"flex items-center gap-4\">\n  <Toggle\n    pressed=pressed\n    pressedChange=(next) => { pressed = next; }\n    aria-label=\"Toggle italic\"\n  >\n    Controlled\n  </Toggle>\n  <span class=\"text-sm text-muted-foreground\">\n    pressed: ${pressed}\n  </span>\n</div>","description":"Zag machines are controlled: a `pressed` prop without a change handler never moves. Pair it with `pressedChange`, or use Marko's bind shorthand `pressed:=state`.","essential":true},{"id":"toggle-outline","title":"Outline","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\n\n<Toggle variant=\"outline\" aria-label=\"Toggle italic\">Italic</Toggle>","description":"Pass `variant=\"outline\"` for an outline style."},{"id":"toggle-text","title":"With Text","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<Toggle aria-label=\"Toggle italic\">\n  <Icon name=\"Italic\" data-icon=\"inline-start\"/>\n  Italic\n</Toggle>","description":"A toggle can combine an icon and a text label as its content."},{"id":"toggle-sizes","title":"Size","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\n\n<div class=\"flex items-center gap-2\">\n  <Toggle size=\"sm\" aria-label=\"Toggle italic\">Small</Toggle>\n  <Toggle aria-label=\"Toggle italic\">Default</Toggle>\n  <Toggle size=\"lg\" aria-label=\"Toggle italic\">Large</Toggle>\n</div>","description":"Pass `size` as `sm`, `default`, or `lg` to change the toggle's size."},{"id":"toggle-disabled","title":"Disabled","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\n\n<div class=\"flex items-center gap-2\">\n  <Toggle disabled aria-label=\"Toggle italic\">Disabled</Toggle>\n  <Toggle pressed disabled aria-label=\"Toggle italic\">Disabled pressed</Toggle>\n</div>","description":"A disabled toggle is skipped by the tab order and ignores pointer input."},{"id":"toggle-rtl","title":"RTL","source":"import Toggle from \"@marko-ui/shadcn/ui/toggle/toggle.marko\";\nimport Icon from \"@marko-ui/shadcn/ui/icon/icon.marko\";\n\n<div dir=\"rtl\">\n  <Toggle aria-label=\"Toggle bookmark\" size=\"sm\" variant=\"outline\">\n    <Icon name=\"BookmarkIcon\" class=\"group-aria-pressed/toggle:fill-foreground\" data-icon=\"inline-start\"/>\n    إشارة مرجعية\n  </Toggle>\n</div>","description":"Toggle restyles correctly under `dir=\"rtl\"`. Unlike our Zag-machine components, Toggle is a plain native `<button>` with local state, so `dir=\"rtl\"` on the element (or an ancestor) is a complete port with no machine-level RTL gap."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","nativeAttributes":"button"}