ControlGroup
A SwiftUI ControlGroup component for grouping interactive controls.
Expo UI ControlGroup matches the official SwiftUI ControlGroup API. When placed inside a Menu, the children are rendered as a compact horizontal row of buttons.
Note: On tvOS,
ControlGrouprequires tvOS 17.0 or later.
Usage
Basic control group
A control group inside a menu, these render as a horizontal row of icon buttons.
import {
Host,
Menu,
ControlGroup,
Button,
} from '@expo/ui/swift-ui';
export default function BasicControlGroupExample() {
return (
<Host style={{ flex: 1 }}>
<Menu label="Options" systemImage="ellipsis.circle">
<ControlGroup>
<Button
systemImage="plus"
label="Add"
onPress={() => console.log('Add')}
/>
<Button
systemImage="star"
label="Favorite"
onPress={() => console.log('Favorite')}
/>
<Button
systemImage="square.and.arrow.up"
label="Share"
onPress={() => console.log('Share')}
/>
</ControlGroup>
<Button
label="Other Action"
onPress={() => console.log('Other')}
/>
</Menu>
</Host>
);
}API
import { ControlGroup } from '@expo/ui/swift-ui';Component
ControlGroup
Type: React.Element<ControlGroupProps>
ControlGroupProps
children
Type: ReactNode
The control group's content. Can contain Button, Toggle, Picker, or other interactive controls.
label
iOS 16+Optional • Type: ReactNode
The label for the control group. Can be a string for simple text labels, or a Label component for custom label content. When omitted, the control group has no label.
systemImage
iOS 16+Optional • Type: SFSymbols7_0
An SF Symbol name to display alongside the label. Only used when label is a string.
Inherited props
Modifiers
Use these modifiers in the modifiers prop of the SwiftUI version.
Modifiers for ControlGroup
Modifiers for any view
accessibilityAddTraitsaccessibilityElementaccessibilityHiddenaccessibilityHintaccessibilityIdentifieraccessibilityInputLabelsaccessibilityLabelaccessibilityRemoveTraitsaccessibilityValueactivityBackgroundTintalignmentGuideallowsTighteninganimationaspectRatiobackgroundbackgroundOverlayblurboldborderbrightnessclippedclipShapecolorInvertcontainerBackgroundcontainerRelativeFrameiOS 17+containerShapecontentShapecontentTransitioniOS 16+contrastcornerRadiuscreateModifierdisableddynamicTypeSizeenvironmentfixedSizefontforegroundColorforegroundStyleframegeometryGroupiOS 17+glassEffectglassEffectIdgrayscalegridCellAnchoriOS 16+gridCellColumnsgridCellUnsizedAxesgridColumnAlignmentiOS 16+hiddenhueRotationidignoreSafeAreaimageScaleinvalidatableContentiOS 17+italickerninglayoutPrioritylineHeightiOS 26+lineLimitlineSpacingluminanceToAlphamaskmatchedGeometryEffectminimumScaleFactormonospacedDigitmultilineTextAlignmentoffsetonAppearonDisappearonGeometryChangeonLongPressGestureonTapGestureopacityoverlaypaddingprivacySensitiveredactedrotation3DEffectrotationEffectsaturationscaleEffectshadowstrikethroughstrokeBordertextCasetinttruncationModeunderlineunredactedwidgetURLzIndex
Sources
The original Expo docs for this page:
- ControlGroup (SwiftUI) (
source-of-truth/versions/v57.0.0/sdk/ui/swift-ui/controlgroup.md)