Pin Input

fandhe-frontend-headless-ui の pin_input mod が提供する PIN/OTP 桁入力の unstyled 部品です。Root / Label / Control / Input（桁ごと）/ HiddenInput の 5 anatomy パーツと、桁ごとの値・フォーカス位置・complete 判定を担う独自の値状態機械を持ちます。data-complete は全桁充足時のみの存在属性として一元管理されます。

/themes/ 側の PinInput（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持ちません。

スタイル済みの表示例は Pin Input を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

One-time code

Features

Root / Label / Control / Input（桁ごと）/ HiddenInput の 5 anatomy パーツと、桁ごとの値・フォーカス位置・complete 判定を担う独自状態機械を提供する。
`data-complete` は全桁充足時のみの存在属性として本モジュールが一元管理する（パーツ間で語彙を分裂させない）。
各桁 `input` は `aria-label`（例: `"PIN digit 1 of 6"`）を必ず付与し、スクリーンリーダー利用者が桁位置を把握できるようにする。`kind`（`Numeric`/`Alphanumeric`/`Alphabetic`）が文字種検証と `inputmode` の両方を決める。
秘密値の SSR プレフィルは非推奨（`hidden_input` の連結値・各桁 `value` は HTML ソースに平文で現れるため、実際の OTP を初期値として埋め込む用途には使わないこと）。

Anatomy

root
  label
  control
    input
  hidden-input

API Reference

Arguments

Name	Type	Default	Description
root/label(complete)	bool		`data-complete` 存在属性を反映する。
root(disabled)	bool		`data-disabled` を反映する。
input(index)	usize		0-origin の桁インデックス（`aria-label` の桁位置表示に使う）。
input(count)	usize		全桁数（`aria-label` の分母に使う）。
input(value)	&str		当該桁の値（空文字列 = 未入力、1 文字 = 入力済み）。
input(kind)	PinInputKind	PinInputKind::Numeric	文字種別。`inputmode` 属性と文字検証の両方を決める。
input(mask)	bool		`true` で `type="password"`（表示マスク）、`false` で `type="text"`。
input(otp)	bool		`true` のとき `autocomplete="one-time-code"`（WebOTP/SMS 自動入力連携）を付与する。
hidden_input(name)	&str		フォーム送信名。各桁 `input` は `name` を持たないため、実送信値はこのパーツのみが担う。
hidden_input(value)	&str		全桁の連結値。

Examples

Alphanumeric, unmasked

`PinInputKind::Alphanumeric` + `mask: false` の招待コード用途。`Numeric` 既定と異なり `inputmode` 属性は出力されない。

Invite code

Accessibility

WAI-ARIA

Attribute	Description
aria-label (input)	`"PIN digit {index+1} of {count}"` を各桁ごとに動的生成する（`render()` の既定エスケープを経由するため注入経路にはならない）。
data-complete	全桁充足時のみの存在属性。`root`/`label`/`input` が共有する。