// 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") ?? "monthly" state playground_firstValue = ctx.url.searchParams.get("pg_firstValue") ?? "monthly" state playground_firstLabel = ctx.url.searchParams.get("pg_firstLabel") ?? "Monthly" state playground_secondValue = ctx.url.searchParams.get("pg_secondValue") ?? "annual" state playground_secondLabel = ctx.url.searchParams.get("pg_secondLabel") ?? "Yearly" state playground_ariaLabel = ctx.url.searchParams.get("pg_ariaLabel") ?? "Toggle Count 1 example" state playground_items = JSON.parse(ctx.url.searchParams.get("pg_items") ?? "[{\"title\":\"Starter\",\"label\":\"Starter\",\"description\":\"For individuals getting started.\",\"monthly\":12,\"annual\":120},{\"title\":\"Team\",\"label\":\"Team\",\"description\":\"For teams working together.\",\"monthly\":29,\"annual\":290}]") 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 outputsTheme readyResponsive
Interactive playground

Configure Toggle Count

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

Live preview
Component code
page ToggleCountExample {
  state items = [
  {
    "title": "Starter",
    "label": "Starter",
    "description": "For individuals getting started.",
    "monthly": 12,
    "annual": 120
  },
  {
    "title": "Team",
    "label": "Team",
    "description": "For teams working together.",
    "monthly": 29,
    "annual": 290
  }
]
  view {
    <ToggleCount
      secondLabel="Yearly"
      ariaLabel="Toggle Count 1 example"
      items="{items}"
      align="start"
      fullWidth="false"
    />
  }
}
Event outputInteract with the preview to inspect the typed payload.
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
page ToggleCountExample {
  state items = [
  {
    "title": "Starter",
    "label": "Starter",
    "description": "For individuals getting started.",
    "monthly": 12,
    "annual": 120
  },
  {
    "title": "Team",
    "label": "Team",
    "description": "For teams working together.",
    "monthly": 29,
    "annual": 290
  }
]
  view {
    <ToggleCount
      secondLabel="Yearly"
      ariaLabel="Toggle Count 1 example"
      items="{items}"
      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
page ToggleCountExample {
  state items = [
  {
    "title": "Starter",
    "label": "Starter",
    "description": "For individuals getting started.",
    "monthly": 12,
    "annual": 120
  },
  {
    "title": "Team",
    "label": "Team",
    "description": "For teams working together.",
    "monthly": 29,
    "annual": 290
  }
]
  view {
    <ToggleCount
      size="sm"
      variant="secondary"
      secondLabel="Yearly"
      ariaLabel="Toggle Count 2 example"
      items="{items}"
      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
page ToggleCountExample {
  state items = [
  {
    "title": "Starter",
    "label": "Starter",
    "description": "For individuals getting started.",
    "monthly": 12,
    "annual": 120
  },
  {
    "title": "Team",
    "label": "Team",
    "description": "For teams working together.",
    "monthly": 29,
    "annual": 290
  }
]
  view {
    <ToggleCount
      size="lg"
      variant="success"
      secondLabel="Yearly"
      ariaLabel="Toggle Count 3 example"
      items="{items}"
    />
  }
}
Component outputs

Receive every typed component output

Use declarative output handlers in .wrn files or register a direct output handler from JavaScript. The canonical API exposes payload and does not require event.detail.

@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(payload)'
  @toggle='console.log(payload)'
/>
Direct output handlers.js
import { registerOutputHandler } from "@wrnexus/csr/outputs"

const component = document.querySelector("[data-ui-component=\"ToggleCount\"], [data-component=\"ToggleCount\"]")

if (component) registerOutputHandler(component, "change", (payload) => {
  console.log("change", payload)
})

if (component) registerOutputHandler(component, "toggle", (payload) => {
  console.log("toggle", payload)
})
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
itemsunknown[][]No
currencystring"$"No
suffixstring""No
firstValueKeystring"monthly"No
secondValueKeystring"annual"No
emptyValuestring"—"No
alignstring"end"No
fullWidthbooleantrueNo
disabledbooleanfalseNo
animatebooleantrueNo
animationDurationnumber450No
animationStepsnumber18No
} }