Section
Section is a container view that groups related content. Sections are commonly used in Lists to organize items into logical groups with optional headers.
Section is a container view that groups related content. Sections are commonly used in Lists to organize items into logical groups with optional headers.
Examples
Basic Usage
Preview unavailable for this example in the static docs build.
Show code
<Section>{<Text>Section content</Text>}</Section>With Header
Preview unavailable for this example in the static docs build.
Show code
<Section header={<Text style={{ fontWeight: 'bold' }}>Section Header</Text>}>{<Text>Section content goes here</Text>}</Section>Multiple Sections
Preview unavailable for this example in the static docs build.
Show code
<VStack spacing={20}>
<Section header={<Text style={{ fontWeight: 'bold' }}>First Section</Text>}>
<Text>Content of first section</Text>
</Section>
<Section header={<Text style={{ fontWeight: 'bold' }}>Second Section</Text>}>
<Text>Content of second section</Text>
</Section>
</VStack>With Buttons
Preview unavailable for this example in the static docs build.
Show code
<Section header={<Text style={{ fontWeight: 'bold' }}>Actions</Text>}>
<VStack spacing={10}>
<Button>Primary Action</Button>
<Button>Secondary Action</Button>
</VStack>
</Section>Complex Content
Preview unavailable for this example in the static docs build.
Show code
<Section header={<Text style={{ fontWeight: 'bold', fontSize: '18px' }}>Details</Text>}>
<VStack spacing={10}>
<Text>Line 1</Text>
<Text>Line 2</Text>
<Text>Line 3</Text>
</VStack>
</Section>Custom Styling
Preview unavailable for this example in the static docs build.
Show code
<Section
header={<Text style={{ fontWeight: 'bold' }}>Styled Section</Text>}
style={{ backgroundColor: '#f5f5f5', borderRadius: '8px' }}
>
<Text>Custom styled section content</Text>
</Section>API
| Prop | Type | Required | Description |
|---|---|---|---|
header | ReactNode | No | An optional header view for the section. Default: undefined |
Inherits additional props from IBaseComponent.
Overview
Section is a container view that groups related content. Sections are commonly used in Lists to organize items into logical groups with optional headers.
SwiftUI Correspondence: Similar to SwiftUI's 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:
Notes
- Sections are commonly used within List components
- Headers are optional but recommended for better organization
- Sections support all standard React children
- Use sections to group related content logically
- Sections can be nested, though it's not common
Best Practices
- Clear headers: Use descriptive headers that clearly indicate section content
- Logical grouping: Group related items together in sections
- Consistent styling: Maintain consistent section styling throughout your app
- Accessibility: Ensure section headers are properly marked up for screen readers
- Spacing: Use appropriate spacing between sections for visual clarity
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
SecureField is a control that displays a secure text input field. SecureField is used for password input and other sensitive information, automatically masking the input.