Input group

The input group combines an input field with an additional element, such as a button to create a single, cohesive control. This layout is useful for actions or context directly related to the input.

Props

is-condensed?: boolean
??

is-secondary?: boolean
If the fields are secondary and are rendered in an alternative style.

Slots

default
The items within to group.

Examples

Basic

A basic and simple input group.

Preview

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormInputGroup>
                <FluxFormInput
                    v-model="username"
                    placeholder="Your username..."/>

                <FluxSecondaryButton
                    icon-leading="rotate"
                    @click="getRandomUsername"/>
            </FluxFormInputGroup>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const username = ref('');

    const usernames = [
        "NeoFlux",
        "FluxRider",
        "SilentFlux",
        "FluxNova",
        "CyberFlux",
        "DarkFlux",
        "FluxHaven",
        "QuantumFlux",
        "FluxDrift",
        "ArcaneFlux"
    ];

    function getRandomUsername(): void {
        username.value = usernames[Math.floor(Math.random() * usernames.length)];
    }
</script>