新しくなったAtomicフォームのラジオボタンとチェックボックスの設定方法についての解説です。
これまでもAtomicフォームについての解説がありますので、まだの方はこちらもご覧ください。
一般的なお問い合わせフォームの場合、お名前、メールアドレス、問い合わせ内容と送信ボタンといった簡易的なフォームでは使いませんが、お問い合わせ内容を事前に知る上で使う機会があると思います。
たとえば、会員か非会員かなどがそうです。
その他にもECサイトの場合、購入前のお問い合わせか、購入後のお問い合わせか、返品希望なのか、などを明確にすることができます。

上図のような場合、フォームの構造は、下図のようになります。

この矢印で記した2つのラジオボタンのどちらかを選ばせる訳ですが、その場合、「この2つがセットです」という設定が必要になります。
ラジオボタン・チェックボックスの設定方法
結論から言うと2つのラジオボタンのボタン部分のエレメントのグループネーム(Group name)に同じ名前を付けます。
下図では「neworrenew(新規またはリニューアルという意味)」をつけています。

念のためもう一つの設定も確認してみます。

こちらも同じく「neworrenew」になっています。
チェックボックスも同様にGroup nameを揃えるだけですので、下図のような沢山選択肢があっても問題ございません。

念のため設定を見ますと、下図のように「services」で統一されています。
