Flux

Appearance

Field ​

The form field component is a base component that wraps a single form control, such as FluxFormInput. It provides a label, error and hint. Fields can also be marked optional.

Required icons

circle-exclamation
circle-info

Props

current-length?: number
The current length of the value.

error?: string
The error message shown after the input.

hint?: string
The hint message shown after the input.

is-optional?: boolean
Mark the field as optional.

label: string
The label of the field.

max-length?: number
The maximum length of the value.

Slots

default ({
    readonly id: string;
})
The input for the field.

addition ({
    readonly currentLength?: number;
    readonly error?: string;
    readonly hint?: string;
    readonly isOptional?: boolean;
    readonly label?: string;
    readonly maxLength?: number;
})
Any optional additions for the field.

value ({
    readonly currentLength?: number;
    readonly error?: string;
    readonly hint?: string;
    readonly isOptional?: boolean;
    readonly label?: string;
    readonly maxLength?: number;
})
An optional value that can be shown next to the label.

Examples ​

Basic

A basic form field.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Label">
                    <FluxFormInput
                        placeholder="Any input here!"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Optional

An optional form field.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Label" is-optional>
                    <FluxFormInput placeholder="Any input here!"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Hint and error

A form field with a hint and error.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField
                    label="Label"
                    error="Something is wrong with the input!"
                    hint="A helpful hint can be shown here.">
                    <FluxFormInput placeholder="Any input here!"/>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

Multiple hints or errors

A form field with multiple hints and errors.

<template>
    <FluxPane style="max-width: 390px">
        <FluxForm>
            <FluxPaneBody>
                <FluxFormField label="Label">
                    <FluxFormInput placeholder="Any input here!"/>

                    <template #addition>
                        <FluxFormFieldAddition
                            v-for="hint in hints"
                            icon="circle-info"
                            mode="hint"
                            :message="hint"/>

                        <FluxFormFieldAddition
                            v-for="error in errors"
                            icon="circle-exclamation"
                            mode="error"
                            :message="error"/>
                    </template>
                </FluxFormField>
            </FluxPaneBody>
        </FluxForm>
    </FluxPane>
</template>

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

    const errors = [
        "Value must be greater than 10",
        "Value must be less than 20"
    ];

    const hints = [
        "Your username must be between 10 and 20 characters long.",
        "You cannot use special characters."
    ]
</script>

Used components ​