ラジオボタンとは
ラジオボタンは、入力フォームなどで複数の選択肢の中から1つだけ選ぶときに使われるボタンです。
1つの項目を選んでほしいときに使われるフォームなので、選択状態にできるのは1項目のみで、1つ選ぶと他の項目は未選択状態に変わります。
ラジオの押しボタンに仕組みが似ていることから、ラジオボタンと名付けられました。
ラジオボタンの作成方法
STEP
ベースになる項目を作成
最初にベースを作成します。今回はラジオボタンと3項目とリセットボタンを作成します。
STEP
コンポーネント設定
全てまとめてコンポーネント設定をします。
右クリックでメニューバーを表示して「コンポーネントにする」から設定できます。
<ショートカット>
macOS ⌘＋K
Windows Ctrl＋K
STEP
ステートを選択設定
アクションをつけるためにステートを4つ設定します。
- 選択されていない状態（初期設定のステート）
- text01を選択した状態
- text02を選択した状態
- text03を選択した状態
STEP
プロトタイプで設定
画面をプロトタイプに切り替えそれぞれのチェック項目とリセットボタンのトリガーとアクションを設定します。
トリガーはタップ、種類は自動アニメーション、移動先はそれぞれ設定する必要があります。
移動先は下記の画像を参照してください。
これらの設定は各ステートの各ボタンに設定が必要です。
設定が完了したらプレビューで動作確認をしてください。
まとめ
ステートの設定を全て行うのはとても手間ですが、クライアントは完成に近いもので検証できます。
ぜひ活用してみてください。
