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 protected]"
                            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/flux';
</script>

Used components

• Disabled