Form

When it comes to designing forms on a website, the layout is just as important as the individual form components themselves. The way that input fields, dropdown menus, checkboxes, and other form elements are arranged can impact how easily users can navigate and complete the form. That's why it's important to have a set of components specifically designed for form layout.

First name

Last name

Email

Question

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