Components

Section

Group related rows under an optional header.

Example

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

Default

Loading preview…

Code
'use client';
import { Text } from '@swiftuijs/ui';
import { Section } from '@swiftuijs/ui';
export default function Example() {
    return (<Section>{<Text>Section content</Text>}</Section>);
}

With Header

Add a header to the section:

Multiple Sections

Use multiple sections to organize content:

With Buttons

Sections can contain interactive elements:

Custom Styling

Apply custom styles to Section:

Usage and limitations

  • Commonly used in List; accepts ordinary React children and optional nested sections.
  • Use descriptive headers, consistent spacing and appropriate heading markup for screen-reader navigation.

More examples

With Header
Multiple Sections
With Buttons
Complex Content
Custom Styling

API reference

PropTypeRequiredDescription
headerReactNodeNoAn optional header view for the section. Default: undefined

Inherits additional props from IBaseComponent.

Edit this page on GitHubReport an issue

SearchField

SearchField provides a dedicated search input with a value-first callback, aligned with SwiftUI's searchable input patterns while remaining an explicit web control.

SecureField

Enter a password through a native, visually masked input.