カラースウォッチピッカー

解説

カラースウォッチピッカーは、丸い色の点を並べて 1 つを選ばせる入力部品です。中身はラジオボタンで、本物の input は画面外へ隠し、隣の丸い span を見た目として使います。選択は :checked 疑似クラスで検知し、選ばれた点には白い縁と現在色のリングを box-shadow で重ね、少し拡大させて選択中だと一目で分かるようにしています。JavaScript は選択が変わったときに、選んだ色のコードを表示テキストへ反映し、その文字色も連動させます。

向いている場面

• 商品のカラーバリエーション選択
• テーマカラーやアクセント色の設定画面
• アバターやラベルの色を選ばせる小さな入力

色の数は label と input の組を増減し、各 value と背景色を指定するだけで増やせます。点の大きさは width と height を変えて調整します。中身がラジオボタンなので、同じ name でグループ化すれば 1 つだけ選択でき、role="group" とラベルでまとまりとして読み上げられます。色だけに頼らず、選択結果をテキストでも示している点が親切な設計です。

使用例・適したシーン

• お問い合わせフォーム
• ニュースレター登録
• 資料請求フォーム
• ログイン・新規登録