Pin Input

fandhe-frontend-pre-styled-ui の pin_input mod が提供するスタイル済み Pin Input 部品です。

桁グループ（例: 6 桁を 3-3 に分ける）を視覚的に区切りたい場合は separator() を control() の間に挟みます（pre-styled-only パートで headless-ui の anatomy には存在しません）。区切り文字は children で自由に差し替えられます（- 以外にも任意のテキスト・アイコンを渡せます）。role="presentation" + aria-hidden="true" を固定付与するため、スクリーンリーダーの読み上げには影響しません。

root の既定 CSS は label を control の上に積む flex-direction: column のため、control()/separator()/control() を root の直下にそのまま並べると縦積みになります。3-3 等の横並びパターンにするには、これらを横並び用のラッパー要素（例: <div style="display: flex; align-items: center;">）でまとめてから root の子に渡してください。専用のグループ用パートは提供していません（個別ボックスデザインではラッパーの display: flex だけで同じ視覚効果を再現できるため）。

Demo

PIN コード等、固定桁数の入力に使う部品。complete/disabled の 2 状態を持つ。separator パートで桁グループ（3-3 等）を合成できる。

PIN code

Verification code

Features

size variant クラスを root へ付与し、headless-ui の pin_input::root へ委譲する。
complete（全桁入力済み）・disabled の 2 状態フラグを直接引数で受け取る。
pre-styled-only separator パートで桁グループ（例: 3-3 の 6 桁）の間に視覚区切りを挟める（headless-ui 非依存、イシュー #2016）。

Anatomy

root
  label
  control
    input
  separator

API Reference

Arguments

Name	Type	Default	Description
`size`	`Size`	`Size::Md`	サイズ variant。
`complete`	`bool`	`false`	全桁入力済み状態。
`disabled`	`bool`	`false`	無効化状態。
`attrs`	`Vec<(&str, &str)>`	—	root パーツへ合成する追加属性。
`children`	`Vec<Node>`	—	root 配下の子ノード（通常 1 桁ずつの input パーツ列）。

Data Attributes

Part	Attribute	Observed Values
`input`	`data-complete`	（値なし）
`input`	`data-disabled`	（値なし）
`input`	`data-filled`	（値なし）
`input`	`data-index`	`0`, `1`, `2`, `3`, `4`, `5`
`label`	`data-complete`	（値なし）
`label`	`data-disabled`	（値なし）
`root`	`data-complete`	（値なし）
`root`	`data-disabled`	（値なし）

CSS Variables

Variable	Default
`--fandhe-pin-input-font-size`	`var(--fandhe-size-control-font-size-md, var(--fandhe-font-font-size-md))`
`--fandhe-pin-input-size`	`var(--fandhe-size-control-height-md, 2.5rem)`