Flux

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.

A helpful hint can be shown here.

TIP

This component is best used within a Form field.

Props

icon?: FluxIconName
The icon of the form field addition

id?: string
The id of the addition element. The Form field uses this to link the message to its control through aria-describedby.

message?: string
The message to display

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

Slots

default
Additional content rendered after the message, typically rich content such as a link.

Examples ​

Hint

A form field addition that displays a hint.

A helpful hint can be shown here.

<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 ​