Components

GroupBox

GroupBox is a container that visually groups related content with a border and optional label. GroupBox is similar to Group but adds visual styling with a border and background.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<GroupBox label="Settings">{(
      <VStack spacing={10} style={{ padding: '15px' }}>
        <Text>Setting 1</Text>
        <Text>Setting 2</Text>
      </VStack>
    )}</GroupBox>

Without Label

Preview unavailable for this example in the static docs build.

Show code

<GroupBox>{(
      <VStack spacing={10} style={{ padding: '15px' }}>
        <Text>Content without label</Text>
        <Text>This GroupBox has no label</Text>
      </VStack>
    )}</GroupBox>

With Form Controls

Preview unavailable for this example in the static docs build.

Show code

<GroupBox label="Preferences">
        <VStack spacing={15} style={{ padding: '15px' }}>
          <HStack spacing={10}>
            <Text>Enable notifications</Text>
            <Toggle isOn={toggle1} onChange={setToggle1} />
          </HStack>
          <HStack spacing={10}>
            <Text>Enable dark mode</Text>
            <Toggle isOn={toggle2} onChange={setToggle2} />
          </HStack>
        </VStack>
      </GroupBox>

Multiple GroupBoxes

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={15}>
      <GroupBox label="Account">
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Username: user123</Text>
          <Text>Email: [email protected]</Text>
        </VStack>
      </GroupBox>
      <GroupBox label="Settings">
        <VStack spacing={10} style={{ padding: '15px' }}>
          <Text>Language: English</Text>
          <Text>Theme: Light</Text>
        </VStack>
      </GroupBox>
    </VStack>

With Buttons

Preview unavailable for this example in the static docs build.

Show code

<GroupBox label="Actions">{(
      <VStack spacing={10} style={{ padding: '15px' }}>
        <Button>Primary Action</Button>
        <Button>Secondary Action</Button>
      </VStack>
    )}</GroupBox>

API

Prop	Type	Required	Description
`label`	`string`	No	Optional label for the group box.

Inherits additional props from IBaseComponent.

Overview

GroupBox is a container that visually groups related content with a border and optional label. GroupBox is similar to Group but adds visual styling with a border and background.

SwiftUI Correspondence: Similar to SwiftUI's GroupBox.

Notes

GroupBox renders as a labeled role="group" region when label is provided.
GroupBox supports an optional label prop.
GroupBox is useful for organizing related content visually.
Use GroupBox when you need visual separation.
GroupBox provides consistent styling for grouped content.

Best Practices

Labels: Use descriptive labels when appropriate
Content organization: Group related content together
Visual hierarchy: Use GroupBox to create visual hierarchy
Consistency: Maintain consistent GroupBox styling
Accessibility: Ensure GroupBox content is accessible

Group

Group is a container for grouping view content. Group is a transparent container that groups views together without adding visual styling. It's useful for applying modifiers to multiple views at once.

HelpLink

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

GroupBox

Examples

API

Overview

Notes

Best Practices

On this page