ReactNode
Section
Split content into multiple easily scannable sections.
- Beta
Get Pro
Import#
Section
: The container component that manages composition.SectionContainer
: The bare container component.SectionHeader
: The header component with title and description.SectionBody
: The section content.
import {Section,SectionContainer,SectionHeader,SectionBody,} from '@saas-ui/pro'
Usage#
Sections can be used to split long content like forms into multiple smaller sections with a title and an optional description.
Basic section#
<Section title="Section" description="This is a basic section" />
Annotated variant#
The annotated variant is typically used together with the Card
component to create well structed forms.
<Sectiontitle="Section"description="This is a basic section."variant="annotated"><Card><CardBody><Form><FormLayout><Field name="title" label="Title" /><Field name="description" label="Description" type="textarea" /></FormLayout></Form></CardBody></Card></Section>
Multiple sections with divider#
The annotated variant is typically used together with the Card
component to create well structed forms.
<VStack divider={<StackDivider />} align="stretch" spacing={8} pb="16"><Sectiontitle="Create workspace"description="Workspaces contain all assets shared across your team."variant="annotated"><Card><CardBody><Form><FormLayout><Field name="title" label="Title" /><Field name="description" label="Description" type="textarea" /></FormLayout></Form></CardBody></Card></Section><Sectiontitle="Teams"description="Select which teams have access to this workspace."variant="annotated"><Card><CardBody><Form><FormLayout><Fieldname="teams"label="Teams"type="select"multipleoptions={[{ value: 'Frontend' }, { value: 'Backend' }]}/></FormLayout></Form></CardBody></Card></Section></VStack>
Composed#
<SectionContainer><SectionHeading mb={4}><SectionTitle>Composed section</SectionTitle><SectionDescription>Sections can be fully composed to give you full control.</SectionDescription></SectionHeading><SectionBody>Section body</SectionBody></SectionContainer>
Props#
The Section
component and all sub components accept all Box
properties.
Section Props#
description
description
Type
isAnnotated
isAnnotated
Type
boolean
isLoading
isLoading
Type
boolean
title
title
Type
ReactNode
Was this helpful?