Flux

Appearance

PIN input ​

A pin input displays a given number of boxes where the user can type a pin-like value. This can, for example, be a TOTP code generated in a authenticator app.

Props

model-value: string
The value of the input.

auto-complete?: FluxAutoCompleteType
Please refer to the HTMLInputElement documentation for examples of values that can be given here.
Default: one-time-code

auto-focus?: boolean
Focus the input when the form is mounted.

disabled?: boolean
If the input is disabled.

is-private?: boolean
If the input is private.

max-length?: number
The maximum value length of the input.
Default: 6

Emits

update:model-value: [string]
Triggered when the value is changed.

Examples ​

Basic

A basic pin input.

<template>
    <FluxFormField label="Pin code">
        <FluxFormPinInput/>
    </FluxFormField>
</template>

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

Toggle

A pin input where you can toggle the private state.

<template>
    <FluxStack direction="vertical" :style="{ alignItems: 'center' }">

        <FluxFormField label="Pin code">
            <FluxFormPinInput
                :is-private="isPrivate"/>
        </FluxFormField>

        <FluxFormField label="Private?">
            <FluxToggle
                v-model="isPrivate"/>
        </FluxFormField>
    </FluxStack>
</template>

<script
    setup
    lang="ts">
    import { FluxFormField, FluxFormPinInput, FluxStack, FluxToggle } from '@flux-ui/components';
    import { ref } from 'vue';

    const isPrivate = ref(false);
</script>

Custom

A pin input with a different amount of numbers.

<template>
    <FluxFormField label="Pin code">
        <FluxFormPinInput
            :max-length="10"/>
    </FluxFormField>
</template>

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