Form section

The form section groups related fields under a shared title. It helps divide longer forms into logical blocks, making them easier to scan and complete.

Personal information

Full name

Email address

Address

Street

City

Accessibility

The section is exposed as a labelled group (role="group" + aria-labelledby) so assistive technology announces the title as the name of the contained fields. Use heading-level to keep the rendered heading (<h1>–<h6>) consistent with the surrounding document outline.

TIP

This component is best used within a Form.

Props

heading-level?: 1 | 2 | 3 | 4 | 5 | 6
The heading level used for the section title. Choose a level that fits the surrounding document outline.
Default: 3

title: string
The title of the section.

Slots

default
The form fields within this section.

Examples

Heading level

Render the section title as a real heading (h1–h6) instead of the default h3.

Preview

Billing details

Card number

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormSection
                    title="Billing details"
                    :heading-level="2">
                    <FluxFormColumn>
                        <FluxFormField label="Card number">
                            <FluxFormInput
                                v-model="cardNumber"
                                placeholder="E.g. 4242 4242 4242 4242"/>
                        </FluxFormField>
                    </FluxFormColumn>
                </FluxFormSection>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormColumn, FluxFormField, FluxFormInput, FluxFormSection, FluxPane, FluxPaneBody } from '@flux-ui/components';
    import { ref } from 'vue';

    const cardNumber = ref('');
</script>

Snippet

FluxFormSection.vue

<template>
    <Preview>
        <FluxPane style="max-width: 390px">
            <FluxForm>
                <FluxPaneBody>
                    <FluxFormColumn>
                        <FluxFormSection title="Personal information">
                            <FluxFormColumn>
                                <FluxFormField label="Full name">
                                    <FluxFormInput placeholder="E.g. John Doe"/>
                                </FluxFormField>

                                <FluxFormField label="Email address">
                                    <FluxFormInput
                                        type="email"
                                        placeholder="E.g. john@example.com"/>
                                </FluxFormField>
                            </FluxFormColumn>
                        </FluxFormSection>

                        <FluxFormSection title="Address">
                            <FluxFormColumn>
                                <FluxFormField label="Street">
                                    <FluxFormInput placeholder="E.g. Main Street 1"/>
                                </FluxFormField>

                                <FluxFormField label="City">
                                    <FluxFormInput placeholder="E.g. Amsterdam"/>
                                </FluxFormField>
                            </FluxFormColumn>
                        </FluxFormSection>
                    </FluxFormColumn>
                </FluxPaneBody>
            </FluxForm>
        </FluxPane>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxForm, FluxFormColumn, FluxFormField, FluxFormInput, FluxFormSection, FluxPane, FluxPaneBody } from '@flux-ui/components';
</script>