Radio Box

用法

Radio Buttons 是一個單一選項的功能模組，呈現結果是以許多不同的選項一次呈現
使用者僅能在眾多選項中挑選其中一個選項，若要可以選擇多個項目，可以使用 Checkboxes 而不是 Radio Buttons 選項按鈕

Class 說明

.check-box

每一組 Radio Buttons 選項，使用 <ul> 包覆

.check-group

用來包 <input> 與 <label> 內容，使用 <div> 標籤

.radio

單選框，type="radio"，使用 <input> 標籤

.label--radio

為 input 元素定義文字標籤的內容，使用 <label> 標籤

NOTERadio Buttons 優點是所有選項一目了然，缺點是需要佔用較多的表單空間

語法

              <ul class="check-box">
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio" checked="checked">
      <label class="label--radio"> First Radio Option </label>
    </div>
  </li>
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio" disabled="disabled">
      <label class="label--radio"> Disabled </label>
    </div>
  </li>
</ul>
值 說明

checked="checked"

被加入參數的選項會呈現已經被選擇的狀態，一組 radio button 僅能使用一個 checked="checked"

disabled="disabled"

被加入參數的選項，無法被選擇

展示

              <ul class="check-box">
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio" checked="checked">
      <label class="label--radio"> 選項一 First Radio Option </label>
    </div>
  </li>
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio">
      <label class="label--radio"> 選項二 Second Radio Option </label>
    </div>
  </li>
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio" disabled="disabled">
      <label class="label--radio"> 選項三 Disabled </label>
    </div>
  </li>
  <li>
    <div class="check-group">
      <input type="radio" class="radio" name="radio" disabled="disabled"checked="checked">
      <label class="label--radio"> 選項四 Disabled Radio Option </label>
    </div>
  </li>
</ul>