Components

PinField

Form field component for entering PIN codes with support for multiple input boxes and validation.

Component

View code

Show playground

Enter PIN (optional)

Your PIN should be 4 digits.

Props

Props	Required	Default	Type
`id`	`true`	—	`string`
`modelValue`	—	`''`	`string`
`type`	—	`string`	`'string' \| 'number'`
`length`	—	`4`	`number`
`size`	—	`InputSize.MD`	`InputSize`
`label`	—	—	`string`
`placeholder`	—	—	`string`
`helpText`	—	—	`string`
`helpTextPosition`	—	`Position.BOTTOM`	`Position`
`mask`	—	`false`	`boolean`
`maskCharacter`	—	`'•'`	`string`
`uppercase`	—	`false`	`boolean`
`validator`	—	—	`Function`
`error`	—	`''`	`string`
`disabled`	—	`false`	`boolean`
`required`	—	`false`	`boolean`
`showOptionalLabel`	—	`true`	`boolean`
`optionalLabel`	—	—	`string`
`autofocus`	—	`false`	`boolean`
`otp`	—	`false`	`boolean`
`transparent`	—	`false`	`boolean`
`inputClass`	—	—	`string`

Usage

id

Sets the id of the field.

 <template>
    <InputField id="field-id" />
</template>

Type: string
Required: true

modelValue

The value of the field.

 <template>
    <InputField v-model="pin" />
</template>

Type: string
Default: ''

type

Sets the type of the field, which controls the allowed input characters and the mobile keyboard type.

 <template>
    <InputField type="number" />
</template>

Type: 'string' | 'number'
Default: 'string'

length

Sets the number of inputs to display.

 <template>
    <InputField :length="6" />
</template>

Type: number
Default: 4

size

Sets the size of the inputs. It uses the InputSize enum.

 <template>
    <InputField :size="InputSize.LG" />
</template>

Type: InputSize
Default: InputSize.MD

Options

Value	Description
`MD`	md
`LG`	lg

label

Sets the label of the field.

 <template>
    <InputField label="Enter PIN" />
</template>

Type: string

placeholder

Sets the placeholder of the inputs.

 <template>
    <InputField placeholder="•" />
</template>

Type: string

helpText

Sets the help text of the field.

 <template>
    <InputField helpText="Your PIN should be 4 digits." />
</template>

Type: string

helpTextPosition

Sets the position of the help text relative to the field. It uses the Position enum.

 <template>
    <PinField helpTextPosition="top" helpText="Appears above the field" />
</template>

Type: Position
Default: Position.BOTTOM

Options

Value	Description
`TOP`	top
`BOTTOM`	bottom

mask

If true, the input will be masked.

 <template>
    <InputField mask />
</template>

Type: boolean
Default: false

maskCharacter

Sets the mask character of the inputs when mask is true.

 <template>
    <InputField mask maskCharacter="*" />
</template>

Type: string
Default: '•'

uppercase

If true, the input will be transformed to uppercase.

 <template>
    <InputField uppercase />
</template>

Type: boolean
Default: false

validator

Sets the validator function for the field, which controls its internal validation state.

It uses the validateField utility to perform required field validation.

 <template>
    <PinField :validator="validateField" />
</template>

Type: function
Default: null

error (v-model:error)

Sets the error message of the field. This prop is bindable via v-model:error, allowing two-way syncing of the validation state.

 <template>
    <PinField v-model:error="errorMessage" />
</template>

Type: string
Default: ''

disabled

If true, the field will be disabled.

 <template>
    <PinField disabled />
</template>

Type: boolean
Default: false

required

If true, the field will be required.

 <template>
    <PinField required />
</template>

Type: boolean
Default: false

showOptionalLabel

When the field is not required, shows an "(optional)" hint next to the label. Set to false to hide it. The hint text defaults to a global setting that can be overridden project-wide, and can also be overridden per field with the optionalLabel prop.

 <template>
    <PinField label="Enter PIN" :showOptionalLabel="false" />
</template>

Type: boolean
Default: true

optionalLabel

Overrides the "(optional)" hint text for this specific field, taking priority over the global default.

 <template>
    <PinField label="Enter PIN" optionalLabel="(not required)" />
</template>

Type: string

autofocus

If true, the first input will be focused on mount.

 <template>
    <PinField autofocus />
</template>

Type: boolean
Default: false

otp

If true, the field will be optimized for one-time password (OTP) input, which may include features like auto-focusing the next input after a character is entered.

 <template>
    <PinField otp />
</template>

Type: boolean
Default: false

transparent

When true, removes the default bg-background-container-surface background from each pin input, making them transparent.

 <template>
    <PinField transparent />
</template>

Type: boolean
Default: false

inputClass

Applies additional CSS classes directly to each <input> element, appended last so they can override other classes.

 <template>
    <PinField inputClass="font-mono text-lg" />
</template>

Type: string