メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Build collapsible accordions with ShadAccordion and ShadAccordionItem; single or multiple open items. Use when adding expandable sections, FAQs, or vertically stacked reveal content in a Flutter shadcn_ui app.
Show callout alerts with ShadAlert and ShadAlert.destructive; icon, title, description. Use when displaying warnings, errors, or important messages in a Flutter shadcn_ui app.
Display user avatars with ShadAvatar; image URL with optional placeholder. Use when showing user profile images or fallback initials in a Flutter shadcn_ui app.
Display badges with ShadBadge; primary, secondary, destructive, outline variants. Use when showing tags, status labels, or count indicators in a Flutter shadcn_ui app.
Build breadcrumb navigation with ShadBreadcrumb, ShadBreadcrumbLink, ShadBreadcrumbDropdown, custom separator. Use when showing navigation path, hierarchy of links, or dropdown breadcrumb in a Flutter shadcn_ui app.
Use Shadcn UI buttons (ShadButton variants: primary, secondary, destructive, outline, ghost, link); leading icon, loading state, gradient and shadow. Use when adding buttons, CTAs, or button-style widgets in a Flutter shadcn_ui app.
| name | shadcn_ui-input-otp |
| description | 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. |
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.
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(),
],
),
],
)
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.
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(),
],
),
],
)