inputkit

Hooks and utilities for formatted inputs — payment cards, TOTP codes, and custom patterns. TypeScript, zero dependencies, works with shadcn.

Packages

Package	Description	JSR	npm
@inputkit/core	Formatters, validators, card detection, Luhn — no React, no DOM	jsr.io/@inputkit/core	npmjs.com/@inputkit/core
@inputkit/react	Three React hook layers built on core	jsr.io/@inputkit/react	npmjs.com/@inputkit/react

Quick start

import { usePaymentInputs } from "@inputkit/react";

function PaymentForm() {
  const { getCardNumberProps, getExpiryDateProps, getCVCProps, meta } = usePaymentInputs();

  return (
    <form onSubmit={() => submit(meta.values)}>
      <input {...getCardNumberProps()} />
      <input {...getExpiryDateProps()} />
      <input {...getCVCProps()} />
      {meta.cardType && <span>{meta.cardType.displayName}</span>}
      {meta.error && <span>{meta.error}</span>}
    </form>
  );
}

Hooks

usePaymentInputs — Multi-field payment card entry with auto-focus, card type detection, and validation across card number, expiry, CVC, and ZIP.

useFormattedInput — Any single input that needs formatting and validation. Bring your own format/parse functions.

useSegmentedInput — TOTP, OTP, and PIN codes. Single hidden input with a slots array for rendering your own visual segments. Native OTP autofill on mobile.

All hooks return prop getters that spread onto <input> or shadcn <Input>, handle cursor position during formatting, and support both controlled and uncontrolled modes.

Core utilities

Use @inputkit/core standalone on the server or in any framework:

import { formatCardNumber, detectCardType, validateCardNumber, validateLuhn } from "@inputkit/core";

formatCardNumber("4111111111111111");   // "4111 1111 1111 1111"
detectCardType("37")?.displayName;      // "American Express"
validateCardNumber("4111111111111111");  // undefined (valid)
validateLuhn("4111111111111112");        // false

License

MIT