チェックボックスに role=”switch” を付けて見えなくし、後ろの span に描いたつまみを :checked で動かすと、CSS だけでスイッチになります。キーボードでの操作と、display: n ...

時刻を選ぶ入力欄を、input type=”time” と React の state で作りました。15分単位にする step、日付をまたぐ min と max、表示と value の形の違い、ピッカーに s ...

ログインの2段階認証（多要素認証、MFA）で、SMS やメール、認証アプリから受け取った6桁の確認コードを1桁ずつの欄に入れる React のコンポーネントです。打つと次の欄へ進み、Backspace で戻り、貼り付けたコードは6つの ...

入力したパスワードの強さを、React で5本のバーと「弱い」「強い」などの言葉で表示します。判定は zxcvbn-ts に任せ、重い計算は Web Worker に移し、メールアドレスの一部を使ったパスワードも弱いと出るようにしまし ...

打った数字に合わせて「090-1234-5678」のようにハイフンを入れる、React の電話番号の入力欄です。途中を書き直すとカーソルが末尾へ飛ぶ問題と、ハイフンを Backspace で消せない問題の直し方を確かめました。 ...

React で色を選ぶ入力欄を、input type=”color” と state で作りました。値が小文字の「#rrggbb」で読み出されることや onChange が呼ばれる回数、カラーコード欄と色のボタ ...

＋と−のボタンで数量を1ずつ変え、入力欄に直接打つこともできるコンポーネントを React で作りました。上限・下限でのボタンの止め方、打っている途中の文字列の扱い、キーボードでの操作と読み上げ用の output の中身を、検証環境で ...

価格の下限と上限を2つのつまみで選ぶスライダーを、input type=”range” を2つ重ねて React で作りました。つまみだけがクリックを受ける CSS と、重なったつまみが動かせなくなる問題の直し ...

入力した言葉を Enter や「,」でタグにして並べ、×ボタンや Backspace で消せる入力欄を React で作りました。日本語の変換を確定する Enter、フォームの送信、削除後のフォーカスの扱いも検証環境で確かめています。 ...

開始日と終了日を選ぶ入力欄を、input type=”date” を2つ並べて React で作りました。終了日の min に開始日を渡す書き方、開始日を後ろにずらしたときの扱い、送信される値、日数の計算での夏 ...