前の記事でテキスト入力のAtomsについて考えてみた。
これって複数行テキスト（<textarea>）とかプルダウン（<select>）でも同じような実装で同じように動作すると思うけど、これらとは明らかに異なるフォームの操作項目があって、これはテキスト入力とは違う実装にならざるを得ない。
なにかと言うとラジオボタンなのだけど、これがちょっと興味深い。
ラジオボタンのAtomsを作ることを考えたとき、おそらく以下のようなものが基本形になると考えられる。
<templates>
<label class="radiobutton-wrapper">
<input type="radio" class="radiobutton" @click="handleClick">
<span class="radiobutton-caption">{{ title }}</span>
</label>
</templates>ちょっと脱線するが、個人的には選択項目のラベルもAtomsに含めてしまって良いのではないかと考えている。Atomic Designとして考えたときに好悪は分かれそうだけど。
なぜかというと、通常の使用方法であれば、その選択項目が何を示すかは必ず表示するし、それがなければ役割を果たせないはずで、であるなら動作上必須の要素だと思うので。
UI上にラジオボタンやチェックボックスだけが置かれる状況というのは無いはずだろう。ということでAtomsに含めるのもアリなんじゃないかなと。
まあそれはとりあえず置いといて、ラジオボタンは前述のテキスト入力とは決定的に違うところがある。それは
2つ以上の同じ要素をグループ化して扱う。
ということ。
UI上にラジオボタンを1つだけ置いて使用することはありえない。もしそういう使い方をしているなら、それはラジオボタンを使うべきではない。
つまり、ラジオボタンのAtomsに関しては、それを2つ以上内包して動作する上位コンポーネント（Molecules）が必ず必要になり、値の操作はMoleculesが責任を持つような構造にならざるを得ない。
バリデーションが必要な場合もMoleculesで実施することになる。
このあたり前述のテキスト入力の記事と比較すると、コンポーネントレイヤーごとの役割がバラついてしまうのが気持ち悪いのだが、うまく整理ができずにいる。