Form

Form layout components arrange inputs, selects, checkboxes and other controls into a clear, consistent structure, making forms easier to scan and complete.

First name

Last name

Email

Question

INFO

The form renders with novalidate, so the browser's native bubble validation is suppressed. Flux components surface validation through their own error prop and the Form field instead.

Props

disabled?: boolean
Disable the entire form.

Emits

submit: []
Triggered when the form is submitted.

Examples

Login

Preview

Email

Password

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormColumn>
                    <FluxFormField label="Email">
                        <FluxFormInput
                            auto-complete="email"
                            placeholder="E.g. email@example.com"
                            type="email"/>
                    </FluxFormField>

                    <FluxFormField label="Password">
                        <FluxFormInput
                            auto-complete="current-password"
                            type="password"/>
                    </FluxFormField>

                    <FluxButtonStack direction="vertical">
                        <FluxPrimaryButton
                            icon-leading="circle-check"
                            is-filled
                            label="Sign in"/>

                        <FluxSecondaryButton
                            is-filled
                            label="Create account"/>

                        <FluxSecondaryButton
                            is-filled
                            label="Forgot password?"/>
                    </FluxButtonStack>
                </FluxFormColumn>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Contact

A contact form combining a FluxFormGrid, single fields, and a textarea, all wrapped inside a single FluxForm.

Preview

First name

Last name

Email

Message

Code

<template>
    <FluxPane style="max-width: 480px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormColumn>
                    <FluxFormGrid :columns="2">
                        <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>
                    </FluxFormGrid>

                    <FluxFormField label="Email">
                        <FluxFormInput
                            auto-complete="email"
                            placeholder="E.g. john@example.com"
                            type="email"/>
                    </FluxFormField>

                    <FluxFormField label="Message">
                        <FluxFormTextArea
                            :rows="4"
                            placeholder="How can we help?"/>
                    </FluxFormField>
                </FluxFormColumn>
            </FluxPaneBody>

            <FluxPaneFooter>
                <FluxSpacer/>

                <FluxPrimaryButton
                    icon-leading="paper-plane"
                    label="Send message"/>
            </FluxPaneFooter>
        </FluxForm>
    </FluxPane>
</template>

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

Used components

• Disabled