Components

GroupBox

Visually group related content with an optional label.

Example

Requires React 18.2+ or 19 and shared styles. See setup.

Default

Loading preview…

Code
'use client';
import { VStack, Text } from '@swiftuijs/ui';
import { GroupBox } from '@swiftuijs/ui';
export default function Example() {
    return (<GroupBox label="Settings">{(<VStack spacing={10} style={{ padding: '15px' }}>
        <Text>Setting 1</Text>
        <Text>Setting 2</Text>
      </VStack>)}</GroupBox>);
}

Usage and limitations

  • label is optional; a supplied label names a role="group" region.
  • Use a descriptive label and consistent spacing/styling. Children retain their own semantic structure and interaction requirements.

More examples

Without Label
With Form Controls
Multiple GroupBoxes
With Buttons

API reference

PropTypeRequiredDescription
labelstringNoOptional label for the group box.

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

Group

Group children in an unstyled HTML container.

HelpLink

HelpLink presents a dedicated support affordance aligned with SwiftUI's `HelpLink`, adapted to the web as an anchor.