Waiting for action
Open a sub-component to view its docs and settings.
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Dual accent colour swatches for branding: primary (top-left chrome) and secondary (bottom-right / companion wash). The compact menu portals into the document and flips or clamps to the viewport so it stays on screen.
createAccentStyle(primary, secondary) to apply CSS custom properties.| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Selected primary hex colour. |
secondaryValue | string | companion for value | Selected secondary hex colour. |
onChange | (value) => void | — | Primary change handler. |
onSecondaryChange | (value) => void | — | Secondary change handler. |
mode | "stacked" | "flagged" | "flagged" | Layout mode for label and control. |
labelPosition | "left" | "right" | "left" | Label placement in flagged mode. |
FieldShell for label wiring.role="radiogroup" with aria-checked on each option.