How do I install the Shadcn UI Input Otp skill?

Run npx skillmds@latest add serverpod/shadcn-ui-input-otp in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Shadcn UI Input Otp safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Shadcn UI Input Otp?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Shadcn UI Input Otp free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Shadcn UI Input Otp?

serverpod (@serverpod) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Shadcn UI Input Otp by serverpod — Agent Skill

Name: Shadcn UI Input Otp
Author: serverpod

Shadcn UI Input Otp

Build OTP input with ShadInputOTP, ShadInputOTPGroup, ShadInputOTPSlot; maxLength, inputFormatters, ShadInputOTPFormField. Use when adding one-time password or verification code inputs in a Flutter shadcn_ui app.

serverpod 6bb92c1 2.3 KB Updated Sep 17, 2026

File contents

Shadcn UI — Input OTP

Instructions

ShadInputOTP is an accessible one-time password component with copy-paste support. Use children to build the layout: ShadInputOTPGroup containing ShadInputOTPSlots, with optional separators (e.g. Icon(LucideIcons.dot)). Set maxLength; use onChanged for the full OTP string. Restrict input with keyboardType and inputFormatters (e.g. FilteringTextInputFormatter.digitsOnly). For forms use ShadInputOTPFormField with id, label, validator.

Basic

ShadInputOTP(
  onChanged: (v) => print('OTP: $v'),
  maxLength: 6,
  children: const [
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
    Icon(size: 24, LucideIcons.dot),
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
  ],
)

With input formatters (digits only)

ShadInputOTP(
  onChanged: (v) => print('OTP: $v'),
  maxLength: 4,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly,
  ],
  children: const [
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
  ],
)

The package also provides UpperCaseTextInputFormatter and LowerCaseTextInputFormatter.

Form field

ShadInputOTPFormField(
  id: 'otp',
  maxLength: 6,
  label: const Text('OTP'),
  description: const Text('Enter your OTP.'),
  validator: (v) {
    if (v.contains(' ')) return 'Fill the whole OTP code';
    return null;
  },
  children: const [
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
    Icon(size: 24, LucideIcons.dot),
    ShadInputOTPGroup(
      children: [
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
        ShadInputOTPSlot(),
      ],
    ),
  ],
)

---name: shadcn-ui-input-otpdescription: Build OTP input with ShadInputOTP, ShadInputOTPGroup, ShadInputOTPSlot; maxLength, inputFormatters, ShadInputOTPFormField. Use when adding one-time password or verification code inputs in a Flutter shadcn_ui app.---# Shadcn UI — Input OTP## Instructions`ShadInputOTP` is an accessible one-time password component with copy-paste support. Use `children` to build the layout: `ShadInputOTPGroup` containing `ShadInputOTPSlot`s, with optional separators (e.g. `Icon(LucideIcons.dot)`). Set `maxLength`; use `onChanged` for the full OTP string. Restrict input with `keyboardType` and `inputFormatters` (e.g. `FilteringTextInputFormatter.digitsOnly`). For forms use `ShadInputOTPFormField` with `id`, `label`, `validator`.### Basic```dartShadInputOTP( onChanged: (v) => print('OTP: $v'), maxLength: 6, children: const [ ShadInputOTPGroup( children: [ ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ], ), Icon(size: 24, LucideIcons.dot), ShadInputOTPGroup( children: [ ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ], ), ],)```### With input formatters (digits only)```dartShadInputOTP( onChanged: (v) => print('OTP: $v'), maxLength: 4, keyboardType: TextInputType.number, inputFormatters: [ FilteringTextInputFormatter.digitsOnly, ], children: const [ ShadInputOTPGroup( children: [ ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ], ), ],)```The package also provides `UpperCaseTextInputFormatter` and `LowerCaseTextInputFormatter`.### Form field```dartShadInputOTPFormField( id: 'otp', maxLength: 6, label: const Text('OTP'), description: const Text('Enter your OTP.'), validator: (v) { if (v.contains(' ')) return 'Fill the whole OTP code'; return null; }, children: const [ ShadInputOTPGroup( children: [ ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ], ), Icon(size: 24, LucideIcons.dot), ShadInputOTPGroup( children: [ ShadInputOTPSlot(), ShadInputOTPSlot(), ShadInputOTPSlot(), ], ), ],)```

Frequently asked questions