Components

ControlGroup

ControlGroup clusters related actions under a shared label. The component keeps SwiftUI's grouped-control mental model while using standard web grouping semantics.

Example

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

Default

Loading preview…

Code
'use client';
import { Button } from '@swiftuijs/ui';
import { ControlGroup } from '@swiftuijs/ui';
export default function Example() {
    return ((<ControlGroup label="Formatting">
      <Button>Bold</Button>
      <Button>Italic</Button>
      <Button>Underline</Button>
    </ControlGroup>));
}

Usage and limitations

  • Use label to provide the group's accessible name.
  • Use orientation="vertical" when actions should stack instead of sit inline.

API reference

PropTypeRequiredDescription
labelReactNodeNoOptional label shown above or alongside the controls.
orientation'horizontal' | 'vertical'NoThe axis used to arrange the controls. Default: 'horizontal'

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

ContextMenu

ContextMenu presents a menu of actions from a context interaction. On the web this maps to the native right-click gesture while preserving SwiftUI's contextual action model.

DatePicker

Select a date or time using the browser’s native input.