{"slug":"control-group","name":"ControlGroup","packageName":"@liquidify/react","category":"controls","maturity":"experimental","summary":"Group related independent actions in one capsule, the React adaptation of SwiftUI ControlGroup.","importPath":"@liquidify/react/control-group","sourcePath":"packages/@liquidify/react/src/components/control-group/control-group.tsx","specPath":"packages/@liquidify/react/src/components/control-group/spec.md","documentationStatus":"missing","storyIds":["controls-control-group--default"],"additionalExports":["ControlGroupSize"],"anatomy":[],"props":[{"name":"children","type":"ReactNode","required":true,"description":"Related controls, normally existing Button components. Each owns its onPress.","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"disabled","type":"boolean | undefined","required":false,"description":"Disable the group. A disabled ancestor always wins over a child's false.","defaultValue":"false","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"label","type":"ReactNode","required":false,"description":"Visible group label; use aria-label for an unnamed visual surface.","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"labelProps","type":"LabelProps | undefined","required":false,"description":"Typography overrides for a string or number label (ADR-0028).","defaultValue":"undefined","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"prominent","type":"boolean | undefined","required":false,"description":"Use Button's prominent tint and enlarge the shared pill on hover/activation.","defaultValue":"false","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"ref","type":"Ref<HTMLFieldSetElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"separators","type":"boolean | undefined","required":false,"description":"Show decorative dividers between adjacent actions.","defaultValue":"true","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"size","type":"ControlGroupSize | undefined","required":false,"description":"Default child size; an explicit child size wins.","defaultValue":"\"regular\", or the enclosing ControlGroup size","declaredIn":"packages/@liquidify/react/src/components/control-group/control-group.tsx"},{"name":"tint","type":"LiquidTintValue | undefined","required":false,"description":"System-accent of the control — drawn from the RESTRICTED {@link LIQUID_COLORS} palette (the thirteen Apple system colours). **Orthogonal to a component's `variant`**: it recolours the accent the surface draws from (focus ring, tinted fill, selection) without changing its variant. Resolved via `data-tint` attribute selectors in CSS (tokens-only, ADR-0003).","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"}],"swiftUIMap":[{"swiftUI":"`init(content:)`","react":"`children`","notes":"Existing Buttons; arbitrary native form controls retain native semantics.","relationship":"direct"},{"swiftUI":"`init(content:label:)`, `init(_:content:)`","react":"`label`, `labelProps`","notes":"Optional visible ReactNode label; string/number typography through TextLabel.","relationship":"direct"},{"swiftUI":"`.labelsHidden()`","react":"`aria-label` / `aria-labelledby`","notes":"Omit visible label and supply an accessible name. Explicit ARIA naming wins.","relationship":"direct"},{"swiftUI":"`.controlSize(_:)`","react":"`size`","notes":"Inherited SizedControlProps; small, regular, large; regular default.","relationship":"direct"},{"swiftUI":"`.tint(_:)`","react":"`tint`","notes":"Inherited TintableControlProps, defaults to child/system accent.","relationship":"direct"},{"swiftUI":"`.disabled(_:)`","react":"`disabled`","notes":"Native fieldset plus Button context, ancestor disabled always wins.","relationship":"direct"},{"swiftUI":"`.buttonStyle(.glassProminent)` inspiration","react":"`prominent`","notes":"Explicit group extension; shared tinted material and Button motion tokens, not a SwiftUI ControlGroup modifier.","relationship":"extension"},{"swiftUI":"Web presentation","react":"`separators`","notes":"Optional decorative dividers; does not change action semantics.","relationship":"direct"},{"swiftUI":"Child `Button(action:)`","react":"Child `Button onPress`","notes":"Existing API charter; no group activation callback.","relationship":"direct"},{"swiftUI":"Web composition","react":"`className`, `ref`, `aria-describedby`","notes":"Ref targets HTMLFieldSetElement. No asChild.","relationship":"direct"}],"tokens":["--lq-color-separator","--lq-radius-pill","--lq-space-1","--lq-space-8"],"keyboard":[],"variants":[],"variantPages":[]}