Flux

Appearance

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

Address

TIP

This component is best used within a Form.

Props

title: string
The title of the section.

Slots

default
The form fields within this section.

Snippet ​

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>