// Generated by scripts/generate-showcase.mjs. Do not edit directly. page ToggleCountDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "segmented" state playground_class = ctx.url.searchParams.get("pg_class") ?? "showcase-instance showcase-instance--1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "billing-cycle" state playground_value = ctx.url.searchParams.get("pg_value") ?? "sample-1" state playground_firstValue = ctx.url.searchParams.get("pg_firstValue") ?? "monthly" state playground_firstLabel = ctx.url.searchParams.get("pg_firstLabel") ?? "Toggle Count" state playground_secondValue = ctx.url.searchParams.get("pg_secondValue") ?? "annual" state playground_secondLabel = ctx.url.searchParams.get("pg_secondLabel") ?? "Toggle Count" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Toggle Count 1 example" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"id\":\"toggle-count-0-1\",\"key\":\"toggle-count-0-1\",\"value\":\"primary\",\"label\":\"Primary workflow\",\"title\":\"Primary workflow\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"A configurable sample message.\",\"href\":\"#toggle-count-demo\",\"actionHref\":\"#toggle-count-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":true,\"selected\":true,\"checked\":true,\"disabled\":false,\"outgoing\":false,\"open\":true,\"number\":1,\"count\":16,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 1\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]},{\"id\":\"toggle-count-0-2\",\"key\":\"toggle-count-0-2\",\"value\":\"secondary\",\"label\":\"Additional option\",\"title\":\"Supporting example\",\"description\":\"A clean default configuration for everyday product interfaces.\",\"text\":\"Another configurable message.\",\"href\":\"#toggle-count-demo\",\"actionHref\":\"#toggle-count-demo\",\"actionLabel\":\"View details\",\"icon\":\"icon-[lucide--sparkles]\",\"iconClass\":\"icon-[lucide--sparkles]\",\"variant\":\"primary\",\"status\":\"Active\",\"time\":\"09:30\",\"current\":false,\"selected\":false,\"checked\":false,\"disabled\":false,\"outgoing\":true,\"open\":true,\"number\":2,\"count\":32,\"percentage\":72,\"color\":\"#7c3aed\",\"target\":\"_self\",\"ariaLabel\":\"Open primary workflow 2\",\"items\":[{\"label\":\"Nested option A\",\"value\":\"nested-a\"},{\"label\":\"Nested option B\",\"value\":\"nested-b\"}],\"links\":[{\"label\":\"Documentation\",\"href\":\"#documentation\"},{\"label\":\"API reference\",\"href\":\"#api-reference\"}],\"values\":[\"Included\",\"Standard\"]}]") state playground_currency = ctx.url.searchParams.get("pg_currency") ?? "$" state playground_suffix = ctx.url.searchParams.get("pg_suffix") ?? "" state playground_firstValueKey = ctx.url.searchParams.get("pg_firstValueKey") ?? "monthly" state playground_secondValueKey = ctx.url.searchParams.get("pg_secondValueKey") ?? "annual" state playground_emptyValue = ctx.url.searchParams.get("pg_emptyValue") ?? "—" state playground_align = ctx.url.searchParams.get("pg_align") ?? "start" state playground_fullWidth = (ctx.url.searchParams.get("pg_fullWidth") ?? "false") === "true" state playground_disabled = (ctx.url.searchParams.get("pg_disabled") ?? "false") === "true" state playground_animate = (ctx.url.searchParams.get("pg_animate") ?? "true") === "true" state playground_animationDuration = Number(ctx.url.searchParams.get("pg_animationDuration") ?? "450") state playground_animationSteps = Number(ctx.url.searchParams.get("pg_animationSteps") ?? "18") seo { title = "Toggle Count" description = "Theme-aware, responsive toggle count component." } view {
Advanced Forms component

Toggle Count

Theme-aware, responsive toggle count component.

23 props0 slots2 eventsTheme readyResponsive
Interactive playground

Configure Toggle Count

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<ToggleCount
  value="sample-1"
  firstLabel="Toggle Count"
  secondLabel="Toggle Count"
  ariaLabel="Toggle Count 1 example"
  items='[
    {
      "id": "toggle-count-0-1",
      "key": "toggle-count-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "toggle-count-0-2",
      "key": "toggle-count-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  align="start"
  fullWidth="false"
/>
Event outputInteract with the preview to inspect event.detail.
Component props23 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Production default

Balanced spacing, hierarchy, and content for the most common product workflow.

01
Live preview
Component usage.wrn
<ToggleCount
  value="sample-1"
  firstLabel="Toggle Count"
  secondLabel="Toggle Count"
  ariaLabel="Toggle Count 1 example"
  items='[
    {
      "id": "toggle-count-0-1",
      "key": "toggle-count-0-1",
      "value": "primary",
      "label": "Primary workflow",
      "title": "Primary workflow",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "A configurable sample message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 16,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "toggle-count-0-2",
      "key": "toggle-count-0-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A clean default configuration for everyday product interfaces.",
      "text": "Another configurable message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--sparkles]",
      "iconClass": "icon-[lucide--sparkles]",
      "variant": "primary",
      "status": "Active",
      "time": "09:30",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 32,
      "percentage": 72,
      "color": "#7c3aed",
      "target": "_self",
      "ariaLabel": "Open primary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  align="start"
  fullWidth="false"
/>
Dense UI

Compact application

A tighter variation for dashboards, side panels, tables, and operational interfaces.

02
Live preview
Component usage.wrn
<ToggleCount
  size="sm"
  variant="secondary"
  value="sample-2"
  firstLabel="Compact example"
  secondLabel="Compact example"
  ariaLabel="Toggle Count 2 example"
  items='[
    {
      "id": "toggle-count-1-1",
      "key": "toggle-count-1-1",
      "value": "primary",
      "label": "Secondary workflow",
      "title": "Secondary workflow",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "A configurable sample message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 24,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    },
    {
      "id": "toggle-count-1-2",
      "key": "toggle-count-1-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A compact configuration designed for dense application layouts.",
      "text": "Another configurable message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "View details",
      "icon": "icon-[lucide--zap]",
      "iconClass": "icon-[lucide--zap]",
      "variant": "secondary",
      "status": "Active",
      "time": "10:15",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": false,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 48,
      "percentage": 48,
      "color": "#0284c7",
      "target": "_self",
      "ariaLabel": "Open secondary workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Standard"
      ]
    }
  ]'
  align="center"
  fullWidth="false"
/>
Extended

Rich configuration

A more expressive variation using additional data, stronger emphasis, and optional states.

03
Live preview
Component usage.wrn
<ToggleCount
  size="lg"
  variant="success"
  value="sample-3"
  firstLabel="Advanced example"
  secondLabel="Advanced example"
  ariaLabel="Toggle Count 3 example"
  items='[
    {
      "id": "toggle-count-2-1",
      "key": "toggle-count-2-1",
      "value": "primary",
      "label": "Advanced workflow",
      "title": "Advanced workflow",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "A configurable sample message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": true,
      "selected": true,
      "checked": true,
      "disabled": false,
      "outgoing": false,
      "open": true,
      "number": 1,
      "count": 32,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 1",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    },
    {
      "id": "toggle-count-2-2",
      "key": "toggle-count-2-2",
      "value": "secondary",
      "label": "Additional option",
      "title": "Supporting example",
      "description": "A richer configuration with more supporting information and actions.",
      "text": "Another configurable message.",
      "href": "#toggle-count-demo",
      "actionHref": "#toggle-count-demo",
      "actionLabel": "Explore workflow",
      "icon": "icon-[lucide--circle-check]",
      "iconClass": "icon-[lucide--circle-check]",
      "variant": "success",
      "status": "Complete",
      "time": "11:45",
      "current": false,
      "selected": false,
      "checked": false,
      "disabled": true,
      "outgoing": true,
      "open": true,
      "number": 2,
      "count": 64,
      "percentage": 91,
      "color": "#059669",
      "target": "_self",
      "ariaLabel": "Open advanced workflow 2",
      "items": [
        {
          "label": "Nested option A",
          "value": "nested-a"
        },
        {
          "label": "Nested option B",
          "value": "nested-b"
        }
      ],
      "links": [
        {
          "label": "Documentation",
          "href": "#documentation"
        },
        {
          "label": "API reference",
          "href": "#api-reference"
        }
      ],
      "values": [
        "Included",
        "Unlimited"
      ]
    }
  ]'
/>
Component events

Respond to every public interaction

Use declarative @event handlers in .wrn files or subscribe to the bubbling browser events from JavaScript.

@changeFires when the component's committed value or selection changes.
@toggleFires when the component changes between open and closed or on and off states.
Declarative handlers.wrn
<ToggleCount
  @change='console.log(event.detail)'
  @toggle='console.log(event.detail)'
/>
Browser listeners.js
const component = document.querySelector("[data-ui-component=\"ToggleCount\"], [data-component=\"ToggleCount\"]")

component?.addEventListener("change", (event) => {
  console.log("change", event.detail)
})

component?.addEventListener("toggle", (event) => {
  console.log("toggle", event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
variantstring"segmented"No
classstring""No
namestring"billing-cycle"No
valuestring"monthly"No
firstValuestring"monthly"No
firstLabelstring"Monthly"No
secondValuestring"annual"No
secondLabelstring"Annual"No
ariaLabelstring"Billing frequency"No
itemsstring[]No
currencystring"$"No
suffixstring""No
firstValueKeystring"monthly"No
secondValueKeystring"annual"No
emptyValuestring"—"No
alignstring"end"No
fullWidthbooleantrueNo
disabledbooleanfalseNo
animatebooleantrueNo
animationDurationnumber450No
animationStepsnumber18No
} }