Flux

PIN input ​

The PIN input renders a fixed number of single-character boxes for entering a PIN-like value, such as a TOTP code from an authenticator app.

TIP

Pasting a code fills the fields automatically. Non-digit characters are stripped and longer values are truncated to max-length, so a partial or padded paste still lands the cursor on the last filled field.

Props

model-value: string
The value of the input.

aria-label?: string
An accessible label for the group of pin fields, announced by assistive technology.

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.

error?: string | null
Error message describing why the input is invalid. Sets aria-invalid and a red border.

is-loading?: boolean
Marks the input as loading.

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

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

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

name?: string
The name attribute for the underlying fieldset.

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>
    <FluxFlex
        align="center"
        direction="vertical"
        :gap="18">
        <FluxFormField label="Pin code">
            <FluxFormPinInput
                :is-private="isPrivate"/>
        </FluxFormField>

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

<script
    setup
    lang="ts">
    import { FluxFlex, FluxFormField, FluxFormPinInput, 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>

Accessible label

An accessible label for screen readers; pasted codes are truncated to the length and partial pastes are supported.

<template>
    <FluxFormField label="Verification code">
        <FluxFormPinInput
            v-model="code"
            aria-label="One-time code"
            :max-length="6"/>
    </FluxFormField>
</template>

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

    const code = ref('');
</script>