Code puncher Overview

The code puncher component is a composable PIN/OTP input component designed for entering verification codes, PINs, and other short alphanumeric sequences. It provides a user-friendly interface with individual input slots, automatic navigation, paste support, and comprehensive keyboard controls. The component is ideal for two-factor authentication, PIN entry, license key input, and similar use cases where users need to enter structured codes.

When to Use

✅ Use code puncher when:

  • Collecting verification codes (OTP, SMS codes)
  • Entering PIN numbers
  • Inputting license keys or activation codes
  • Building two-factor authentication flows
  • Creating structured alphanumeric input fields

❌ Don't use code puncher for:

  • Free-form text input (use input component)
  • Multi-line text entry (use textarea)
  • Numeric input with stepper controls (use number input)
  • Single character input (use regular input)
  • Long-form content (use textarea or rich text editor)
Examples Default code puncher

A basic 6-digit code puncher for OTP verification:

Validation feedback

Provide contextual feedback to users with validation messages:

Sizes

Choose code puncher sizes based on context and visual hierarchy:

Code puncher states

Code puncher components support various states to communicate different conditions:

Input patterns and masking

The code puncher supports different input patterns and masking for various use cases:

Accessibility features

Code puncher components include comprehensive accessibility support for screen readers and keyboard navigation:

Required fields Properly announced to screen readers with aria-required
Error states Error messages are announced and associated with the input
Keyboard navigation Arrow keys, Home, End, Backspace, and Delete are fully supported
Real-World Patterns Two-Factor Authentication Flow
Verify Your Identity We've sent a 6-digit verification code to your email address. Please enter it below. Verify
PIN Entry
Enter Your PIN Continue
Custom Styling Quick customization with CSS custom properties

Many visual tweaks can be achieved by overriding the built-in CSS variables directly on the component instance:

Advanced styling with CSS parts

The code puncher component exposes several CSS parts (base, slots, label, description, feedback) that can be targeted for deep customization:

Select a presetCompact SpacingBordered ContainerNeon Glow
Copy CSSFormat CSSResetLightDark
CSS Editor
Live Preview
Paste Support

The component automatically handles paste events, cleaning common separators and distributing characters User can paste "123-456" or "123 456" and it will be automaticallycleaned and distributed across slots Supports common separators: -, ·, and whitespace

Pattern Validation

Custom patterns can be specified using regex:

<!-- Numeric only (default) -->
<dap-ds-code-puncher pattern="[0-9]">
  <!-- ... -->
</dap-ds-code-puncher>

<!-- Alphanumeric uppercase -->
<dap-ds-code-puncher pattern="[A-Z0-9]">
  <!-- ... -->
</dap-ds-code-puncher>

<!-- Letters only -->
<dap-ds-code-puncher pattern="[A-Za-z]">
  <!-- ... -->
</dap-ds-code-puncher>
Importing Per-component import (Recommended)

Import the component by its own subpath. This registers <dap-ds-code-puncher> (and the components it renders internally) and lets your bundler include only what you use:

import 'dap-design-system/components/code-puncher'

Need a reference to the class (e.g. to register it manually or extend it)? The same subpath default-exports it:

import DapDSCodePuncher from 'dap-design-system/components/code-puncher'
Register everything

Register the whole library at once — convenient, but pulls every component into your bundle:

import 'dap-design-system'
Importing React 
import { DapDSCodePuncherReact } from 'dap-design-system/react'
Attributes
PropertyTypeDefaultDescription
maskbooleanfalseMask input like password. Default is false.
patternstring'[0-9]'Regex pattern for allowed characters. Default is '[0-9]'.
placeholderstring''Placeholder character for empty slots.
autocompletestring'one-time-code'Autocomplete hint. Default is 'one-time-code'.
valuestringThe complete code value.
size'xs', 'sm' , 'lg'The size of the slots. Default is 'sm'.
labelstringThe label of the component.
hideLabelbooleanVisually hides the label while keeping it available to assistive technology. (default: false)
descriptionstringThe description of the component.
tooltipstringThe tooltip of the component.
feedbackstringThe feedback message.
feedbackType'negative', 'positive' , 'warning'The feedback type.
status'success', 'error'The status of the component.
disabledbooleanDisable all slots. Default is false.
readonlybooleanRead-only state. Default is false.
requiredbooleanRequired for form validation. Default is false.
requiredLabelstringIndicator of required text. (default: '*')
namestringForm element name.
Slots
NameDescription
defaultSlot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.
Events
Event NameDescriptionType
dds-inputFires on each digit input.{value: string, index: number }
dds-changeFires when value changes.{value: string }
dds-completeFires when all slots are filled.{value: string }
dds-focusFires when component gains focus.void
dds-blurFires when component loses focus.void
CSS Parts
Part NameDescription
baseThe main container.
slotsThe slots container.
labelThe label element.
descriptionThe description element.
feedbackThe feedback element.
How to Use CSS Parts

You can style CSS parts using the ::part() pseudo-element selector:

/* Target a specific part */
.my-custom-dap-ds-code-puncher::part(base) {
  /* Your custom styles */
}

/* Target multiple parts */
.my-custom-dap-ds-code-puncher::part(base),
.my-custom-dap-ds-code-puncher::part(slots) {
  /* Shared styles */
}

Example usage:

<dap-ds-code-puncher class="my-custom-dap-ds-code-puncher">
  Code puncher
</dap-ds-code-puncher>

.my-custom-dap-ds-code-puncher::part(base) {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.

 CSS Custom Properties

No CSS custom properties available.

Components Code Puncher <dap-ds-code-puncher/> Attributes
PropertyTypeDefaultDescription
maskbooleanfalseMask input like password. Default is false.
patternstring'[0-9]'Regex pattern for allowed characters. Default is '[0-9]'.
placeholderstring''Placeholder character for empty slots.
autocompletestring'one-time-code'Autocomplete hint. Default is 'one-time-code'.
valuestringThe complete code value.
size'xs', 'sm' , 'lg'The size of the slots. Default is 'sm'.
labelstringThe label of the component.
hideLabelbooleanVisually hides the label while keeping it available to assistive technology. (default: false)
descriptionstringThe description of the component.
tooltipstringThe tooltip of the component.
feedbackstringThe feedback message.
feedbackType'negative', 'positive' , 'warning'The feedback type.
status'success', 'error'The status of the component.
disabledbooleanDisable all slots. Default is false.
readonlybooleanRead-only state. Default is false.
requiredbooleanRequired for form validation. Default is false.
requiredLabelstringIndicator of required text. (default: '*')
namestringForm element name.
Slots
NameDescription
defaultSlot for code-puncher-group, code-puncher-slot, and code-puncher-separator elements.
Events
Event NameDescriptionType
dds-inputFires on each digit input.{value: string, index: number }
dds-changeFires when value changes.{value: string }
dds-completeFires when all slots are filled.{value: string }
dds-focusFires when component gains focus.void
dds-blurFires when component loses focus.void
CSS Parts
Part NameDescription
baseThe main container.
slotsThe slots container.
labelThe label element.
descriptionThe description element.
feedbackThe feedback element.
CSS Custom Properties

No CSS custom properties available.