Flux

Input addition ​

The input addition is a small element placed visually inside a form input, typically used to display a unit, currency symbol, or icon. It can be placed before or after the input when combined with an Input group.

€
.com

TIP

This component is best used within an Input group.

Props

icon?: FluxIconName
The icon shown inside the addition.

label?: string
The label shown inside the addition.

Slots

default
Custom content for the addition.

Snippet ​

vue
<template>
    <Preview>
        <FluxFlex
            direction="vertical"
            :gap="18"
            style="width: min(100%, 320px)">
            <FluxFormField label="Price">
                <FluxFormInputGroup>
                    <FluxFormInputAddition label="€"/>
                    <FluxFormInput
                        type="number"
                        placeholder="0.00"/>
                </FluxFormInputGroup>
            </FluxFormField>

            <FluxFormField label="Domain">
                <FluxFormInputGroup>
                    <FluxFormInput placeholder="example"/>
                    <FluxFormInputAddition label=".com"/>
                </FluxFormInputGroup>
            </FluxFormField>
        </FluxFlex>
    </Preview>
</template>

<script
    setup
    lang="ts">
    import { FluxFlex, FluxFormField, FluxFormInput, FluxFormInputAddition, FluxFormInputGroup } from '@flux-ui/components';
</script>

Used components ​