Column

The column arranges fields in a vertical stack. It’s useful when you want inputs to appear one above the other in a clear, linear flow. This layout helps guide the user downward through the form, making it easy to read and complete each field step-by-step.

First name

Last name

Slots

default
The default slot for the column.

Examples

Basic

A basic form column.

Preview

First name

Last name

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormColumn>
                    <FluxFormField label="First name">
                        <FluxFormInput
                            auto-complete="given_name"
                            placeholder="E.g. John"/>
                    </FluxFormField>

                    <FluxFormField label="Last name">
                        <FluxFormInput
                            auto-complete="family_name"
                            placeholder="E.g. Doe"/>
                    </FluxFormField>
                </FluxFormColumn>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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