Form grid

The form grid arranges fields in a configurable number of columns. It is useful when you want to display multiple inputs side by side, for example in dense forms or settings panels.

First name

Last name

City

Postal code

TIP

This component is best used within a Form.

Props

columns?: number
The number of columns in the grid.

Slots

default
The form fields to arrange in a grid.

Examples

Three columns

A form grid with three columns for short related fields like an address.

Preview

Street

Number

Suffix

Code

<template>
    <Preview>
        <FluxPane style="max-width: 540px">
            <FluxForm>
                <FluxPaneBody>
                    <FluxFormGrid :columns="3">
                        <FluxFormField label="Street">
                            <FluxFormInput placeholder="E.g. Main Street"/>
                        </FluxFormField>

                        <FluxFormField label="Number">
                            <FluxFormInput placeholder="E.g. 12"/>
                        </FluxFormField>

                        <FluxFormField label="Suffix">
                            <FluxFormInput placeholder="E.g. A"/>
                        </FluxFormField>
                    </FluxFormGrid>
                </FluxPaneBody>
            </FluxForm>
        </FluxPane>
    </Preview>
</template>

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