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

aria-label?: string
An accessible label for the group. When set, the group is exposed with role="group" and this label; otherwise no group role is applied.

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>

Labelled

An accessible group label via aria-label; the group only takes role="group" when labelled.

Preview

Code

<template>
    <FluxPane style="max-width: 390px">
        <FluxPaneBody>
            <FluxFormInputGroup aria-label="Phone number">
                <FluxFormSelect
                    v-model="countryCode"
                    :options="countryCodes"/>

                <FluxFormInput
                    v-model="phoneNumber"
                    type="tel"
                    placeholder="Your phone number..."/>
            </FluxFormInputGroup>
        </FluxPaneBody>
    </FluxPane>
</template>

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

    const countryCode = ref('+1');
    const phoneNumber = ref('');

    const countryCodes = [
        { label: '+1', value: '+1' },
        { label: '+31', value: '+31' },
        { label: '+44', value: '+44' },
        { label: '+49', value: '+49' }
    ];
</script>