web-dev-qa-db-ja.com

ラジオボタンの代替?

ラジオボタンとスイッチボタンはどちらも同じ働きをします-一度に1つのオプションを選択します。ラジオ/スイッチボタン以外に、2つのオプションを選択する方法はありますか?

私の場合、オプションのリストは、指定された選択肢のいずれかを選択した後にのみ表示されます。だから私はラジオボタンを使いたくありません。現在、切り替えボタンがあります。別の方法を教えてください。ありがとう

enter image description here

5
Hemalatha

トグルスイッチまたはラジオボタンはどちらも、この使用例に適しています。明確で、親しみやすく、効果的です。よくやった!

Option 1/2 rendered as a toggle switchOption 1/2 rendered as radios

もちろん、ラジオボタンをデフォルトのオプション1に設定して、常に1つが選択されるようにすることができます。

オプションが2つしかない場合、2つのうちどちらが選択されているかが不明確になるため、アクティブ/非アクティブのボタンの使用は避けます。これはよく表示され(特にDVDメニューでよくわかりますか?)、役に立ちません。

Two options rendered as buttons - avoid!

それが役に立てば幸い:)

7
cheersphilip

ラジオボタンとスイッチボタンは同じことをしません。ラジオボタンを使用すると、セット内のオプションを1つだけ選択できます。スイッチを使用すると、オプションをオンまたはオフにできます。


あなたの場合のラジオボタンの代わりに、トグルボタンを排他的な選択で使用できます。ただし、トグルするオプションが3つ以上ある場合にのみお勧めします

トグルボタンを使用して、関連するオプションをグループ化できます。レイアウトと間隔を調整して、特定のトグルボタンがグループの一部であることを伝えます。

enter image description here

トグルボタンの要件:

  • グループに少なくとも3つのトグルボタンがある
  • ボタン、テキスト、アイコン、またはその両方にラベルを付ける

これらのOption1/Option2をタブとして使用しているようです。気をつけて。別の方法として、ドロップダウンを使用できます。

enter image description here


素材デザイン-ボタン

6
Alvaro

選択肢の数が少なく、1つが常にデフォルトになっている場合は、ラジオボタンのタブまたはタブバーを入れ替えることができます。これらはすべて、相互に排他的なオプションのリストを提供するために機能します。

特にタブでは、選択された項目とそれに含まれるサブオプションの間に視覚的に明らかな関連付けがあります。

1
scunliffe

ラジオボタンは、相互に排他的な2つ以上のオプションのリストがあり、ユーザーが1つだけ選択する必要がある場合に使用されます。つまり、選択されていないラジオボタンをクリックすると、以前にリストで選択されていた他のボタンの選択がすべて解除されます。

チェックボックスは、オプションのリストがあり、ユーザーが0、1、またはいくつかを含む任意の数の選択肢を選択できる場合に使用されます。つまり、各チェックボックスはリスト内の他のすべてのチェックボックスから独立しているため、1つのボックスをオンにしても他のチェックボックスはオフになりません

https://www.chronoengine.com/faqs/58-cfv4/cfv4-elements-and-html/2679-what-are-the-differences-between-select-drop-downs-radio-buttons- and-checkboxes.html

enter image description here

1
Harshith

これに対する解決策が完全にハッシュ化されているとは思いません。少しのグラフィックアニメーションは、ユーザーが選択したセクションを強調表示するボックスを持つことで、「ボタン」アプローチの曖昧さを解決できますが、ユーザーはその選択にスライドするため、ユーザーはそのボックスがそうであるという事実を直感的に理解できますのみハイライトoneオプション。

0
SS UX