Flux

Appearance

Field addition ​

The field addition is used to display contextual text beneath an input field, providing either a hint or an error message. Hints offer subtle guidance or clarification to help users input information correctly, while errors appear when validation fails, clearly indicating what needs to be fixed.

TIP

This component is best used within a Form field.

Props

icon?: FluxIconName
The icon of the form field addition

message?: string
The message to display

mode?: "hint" | "error"
The mode of the form field addition
Default: hint

Examples ​

Hint

A form field addition that displays a hint.

<template>
    <FluxFormFieldAddition
        icon="circle-info"
        message="A helpful hint can be shown here."
        mode="hint"/>
</template>

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

Error

A form field addition that displays an error.

<template>
    <FluxFormFieldAddition
        icon="circle-exclamation"
        message="Something is wrong with the input!"
        mode="error"/>
</template>

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

Used components ​