Pin Input

<afp-pin-input>

experimental

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A PIN input component for entering multi-digit codes.

<afp-pin-input length="4"></afp-pin-input>

<afp-pin-input [length]=4></afp-pin-input>

<AfpPinInput length="4"></AfpPinInput>

<AfpPinInput :length=4></AfpPinInput>

Examples #

Sizes #

Use the size attribute to adjust the size of the PIN input fields.

<div class="afp-stack">
  <afp-pin-input length="4" size="small"></afp-pin-input>
  <afp-pin-input length="4" size="medium"></afp-pin-input>
  <afp-pin-input length="4" size="large"></afp-pin-input>
</div>

<div class="afp-stack">
  <afp-pin-input [length]=4 [size]="'small'"></afp-pin-input>
  <afp-pin-input [length]=4 [size]="'medium'"></afp-pin-input>
  <afp-pin-input [length]=4 [size]="'large'"></afp-pin-input>
</div>

<div class="afp-stack">
  <AfpPinInput length="4" size="small"></AfpPinInput>
  <AfpPinInput length="4" size="medium"></AfpPinInput>
  <AfpPinInput length="4" size="large"></AfpPinInput>
</div>

<div class="afp-stack">
  <AfpPinInput :length=4 :size="'small'"></AfpPinInput>
  <AfpPinInput :length=4 :size="'medium'"></AfpPinInput>
  <AfpPinInput :length=4 :size="'large'"></AfpPinInput>
</div>

Shapes #

Use the shape attribute to adjust the shape of the PIN input fields.

<div class="afp-stack">
  <afp-pin-input length="4" shape="pill"></afp-pin-input>
  <afp-pin-input length="4" shape="rounded"></afp-pin-input>
  <afp-pin-input length="4" shape="soft"></afp-pin-input>
  <afp-pin-input length="4" shape="square"></afp-pin-input>
</div>

<div class="afp-stack">
  <afp-pin-input [length]=4 [shape]="'pill'"></afp-pin-input>
  <afp-pin-input [length]=4 [shape]="'rounded'"></afp-pin-input>
  <afp-pin-input [length]=4 [shape]="'soft'"></afp-pin-input>
  <afp-pin-input [length]=4 [shape]="'square'"></afp-pin-input>
</div>

<div class="afp-stack">
  <AfpPinInput length="4" shape="pill"></AfpPinInput>
  <AfpPinInput length="4" shape="rounded"></AfpPinInput>
  <AfpPinInput length="4" shape="soft"></AfpPinInput>
  <AfpPinInput length="4" shape="square"></AfpPinInput>
</div>

<div class="afp-stack">
  <AfpPinInput :length=4 :shape="'pill'"></AfpPinInput>
  <AfpPinInput :length=4 :shape="'rounded'"></AfpPinInput>
  <AfpPinInput :length=4 :shape="'soft'"></AfpPinInput>
  <AfpPinInput :length=4 :shape="'square'"></AfpPinInput>
</div>

Type of input #

Use the type attribute to control which characters are allowed in the PIN input.

numeric (default): digits only (0–9)
alphanumeric: letters and digits
alpha: letters

<afp-pin-input length="6" type="alpha"></afp-pin-input>

<afp-pin-input [length]=6 [type]="'alpha'"></afp-pin-input>

<AfpPinInput length="6" type="alpha"></AfpPinInput>

<AfpPinInput :length=6 :type="'alpha'"></AfpPinInput>

Placeholder #

Use the placeholder attribute to display a hint character in each PIN field.

<afp-pin-input length="6" placeholder = "." type="alphanumeric"></afp-pin-input>

<afp-pin-input [length]=6 placeholder = "." [type]="'alphanumeric'"></afp-pin-input>

<AfpPinInput length="6" placeholder = "." type="alphanumeric"></AfpPinInput>

<AfpPinInput :length=6 placeholder = "." :type="'alphanumeric'"></AfpPinInput>

Disabled state #

Use the disabled attribute to disable all input fields at once.

<afp-pin-input length="4" disabled></afp-pin-input>

<afp-pin-input [length]=4 disabled></afp-pin-input>

<AfpPinInput length="4" disabled></AfpPinInput>

<AfpPinInput :length=4 disabled></AfpPinInput>

Invalid state #

Use the invalid attribute to mark the PIN as invalid and display an error message below the fields.

<afp-pin-input 
  length="6"
  invalid="The code you entered is incorrect"
></afp-pin-input>

<afp-pin-input 
  [length]=6
  [invalid]="'The code you entered is incorrect'"
></afp-pin-input>

<AfpPinInput 
  length="6"
  invalid="The code you entered is incorrect"
></AfpPinInput>

<AfpPinInput 
  :length=6
  :invalid="'The code you entered is incorrect'"
></AfpPinInput>

With preset value #

Use the value attribute to prefill the PIN fields.

<afp-pin-input length="6" value="123456"></afp-pin-input>

<afp-pin-input [length]=6 [value]=123456></afp-pin-input>

<AfpPinInput length="6" value="123456"></AfpPinInput>

<AfpPinInput :length=6 :value=123456></AfpPinInput>

Properties

Learn more about properties.

Name Description Reflects

length

Number of PIN digits.

Type number

Default 6

type

Type of input allowed.

Type

PinInputType

Name	Description
`NUMERIC`	Numeric input allowing only digits (0-9).
`ALPHA`	Alphabetic input allowing only letters (A-Z, a-z).
`ALPHANUMERIC`	Alphanumeric input allowing both letters and digits.

PinInputType

Default PinInputType.NUMERIC

size

Size of the input fields.

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

shape

Shape of the input fields.

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

value

Complete PIN value as a single string.

Type string

Default ''

disabled

Disables all inputs.

Type boolean

Default false

invalid

Error message shown below the inputs.

Type string | undefined

placeholder

Placeholder for each input.

Type string

Default ''

Events

Learn more about events.

Name	Return	Description
`afp-value-changed`	`string`	Emitted whenever the PIN value changes.
`afp-pin-complete`	`string`	Emitted when all PIN digits have been filled.

Slots

Learn more about slots.

Name	Description
`default`	The default slot.

Internationalization

Learn more about internationalization.

Key	Description
`pin-input.digit`	aria-label for each digit input

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The component's base wrapper.	`::part(base)`
`input`	The individual input fields.	`::part(input)`
`invalid`	The error message container.	`::part(invalid)`

CSS Custom Properties

Name	Description	Default
`--afp-pin-input-gap`	Gap between individual input fields.	`--afp-space-s`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-input

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/pin-input/pin-input.js';