Row

The row places fields in a horizontal stack. It’s ideal for grouping related inputs side-by-side, such as first and last name fields. This layout keeps the form compact and visually aligned while maintaining a clear relationship between the fields.

First name

Last name

Slots

default
The default slot for the row.

Examples

Basic

A basic form row.

Preview

First name

Last name

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormRow>
                    <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>
                </FluxFormRow>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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