Group Box

Class: FxGroupBox · Tag: <fx-group-box>

The <fx-group-box> component is a titled enclosure (WPF/Avalonia GroupBox pattern) designed to group multiple interactive HMI components — faders, gauges, switches, displays — into logical console boards.

Installation

import '@salsafx/ui';

Basic Usage

Industrial enclosure module

A telemetry board housing a radial gauge, potentiometer, and multi-state switch:

<fx-group-box title="Ventilation Substation Unit" background="#111827">
    <fx-radial-gauge value="80" label="Fan Speed"></fx-radial-gauge>
</fx-group-box>

API Reference

Properties & Attributes

Property	Attribute	Type	Default	Description
`title`	`title`	`String`	`""`	Optional header title.
`titleColor`	`title-color`	`String`	`"#94a3b8"`	Color of the header title.
`background`	`background`	`String`	`"#111827"`	Background color of the group box.
`border`	`border`	`String`	`"1px solid ..."`	Border style of the group box.
`borderRadius`	`border-radius`	`String`	`"8px"`	Corner border radius.
`padding`	`padding`	`String`	`"20px"`	Padding inside the group box.
`gap`	`gap`	`String`	`"20px"`	Spacing gap between child elements.
`flexDirection`	`flex-direction`	`String`	`"column"`	Content flex direction (`"column"` or `"row"`).
`alignX`	`align-x`	`String`	`"center"`	Horizontal content alignment (`"left"`, `"center"`, `"right"`, `"stretch"`).
`alignY`	`align-y`	`String`	`"center"`	Vertical content alignment (`"top"`, `"center"`, `"bottom"`, `"stretch"`).

Slots

Name	Description
`default`	Nested child controls.

CSS Custom Properties

Property	Default	Description
`--fx-font-family`	`sans-serif`	Font stack for titles and nested labels.

Object Hierarchy

classDiagram
    direction TB
    class FxElement
    class FxContainerElement
    class FxContentElement
    class FxGroupBox

    FxElement <|-- FxContainerElement
    FxContainerElement <|-- FxContentElement
    FxContentElement <|-- FxGroupBox