radio

bootstrap5.css

bootstrap5.css
.form-check-input[type="radio"] {
  border-radius: 50%;
}

html bootstrap5 Sample

フォームタイトルのアイコン、水平レイアウト:rowとcolとfa-shopping-basket


formタイトルにfont-awesome

  <!-- https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css -->
  <!-- font-awesomeによるアイコン -->
  <h3 class="block-title-info">
    <i class="fa fa-shopping-basket" aria-hidden="true"></i>formタイトルにfont-awesome
  </h3>
  <div class="row">
    <!-- formのレイアウトにrowcolを利用して、垂直から水平レイアウトに変更する -->
    <!-- 最小単位のセット、勝手に順番に2列で並んでいく -->
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-select">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="mb-3 col-sm-6">
      <!-- クリックするとファイルダイヤログが表示 -->
      <label for="file1">Fileを選択を開く</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">check:</label>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1a" checked />
        <label class="form-check-label" for="check1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1b" />
        <label class="form-check-label" for="check1b">Check B</label>
      </div>
    </div>
    <div class="mb-3 col-sm-6">
      <label for="select1a">radio:</label>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1a" checked />
        <label class="form-check-label" for="radio1a">Check A</label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="radio1" id="radio1b" />
        <label class="form-check-label" for="radio1b">Check B</label>
      </div>
    </div>
  </div>

チェックボックスを横並びに変更する:form-check-inline


  <!-- 同じ水平行にあるチェックボックスやラジオをグループ化する -->
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio1" value="option1" />
    <label class="form-check-label" for="Radio1">1を選択</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio2" value="option2" />
    <label class="form-check-label" for="Radio2">2を選択</label>
  </div>

チェックボックスを無効にする:disabled


  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="RadioOptions" id="Radio3" value="option3" disabled />
    <label class="form-check-label" for="Radio3">3を選択 (disabled)</label>
  </div>

チェックボックスとラジオボタンを無効にする


  <!-- チェックボックスを無効にする -->
  <div class="form-check">
    <input type="checkbox" class="form-check-input" id="checkbox11" disabled>
    <label class="form-control-label" for="checkbox11">
      チェック(無効)
    </label>
  </div>
  <!-- ラジオボタンを無効にする -->
  <div class="form-check">
    <input type="radio" name="radioDisabled" id="checkbox12" class="form-check-input" disabled>
    <label class="form-control-label" for="checkbox12">
      オプション(無効)
    </label>
  </div>

チェックボックスとラジオボタンを作成する:form-checkとform-check-inputとform-check-label


  <!-- カスタムフォームのチェックボックス -->
  <div class="form-check mb-3">
    <input type="checkbox" class="form-check-input" id="checkbox13">
    <label class="form-check-label" for="checkbox13">チェックする</label>
  </div>
  <!-- カスタムフォームのラジオボタン -->
  <div class="form-check">
    <input type="radio" id="option1" name="option" class="form-check-input">
    <label class="form-check-label" for="option1">オプション1</label>
  </div>
  <div class="form-check">
    <input type="radio" id="option2" name="option" class="form-check-input">
    <label class="form-check-label" for="option2">オプション2</label>
  </div>

ボタン型のチェックボックス:btn-check


  <div class="form-check">
    <input type="checkbox" class="btn-check" id="btn-check-outlined" autocomplete="off" />
    <label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label>
    <input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked autocomplete="off" />
    <label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label>
    <input type="radio" class="btn-check" name="options-outlined" id="success-outlined" autocomplete="off" checked />
    <label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>
    <input type="radio" class="btn-check" name="options-outlined" id="danger-outlined" autocomplete="off" />
    <label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>
  </div>

水平配置のフォームを作成する:mb-3とrowとcol


ラジオボタン
チェックボックス
  <div class="mb-3 row">
    <label for="inputEmail" class="col-sm-2 col-form-label">メールアドレス</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="メールアドレスを入力">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">パスワード</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="パスワードを入力">
    </div>
  </div>
  <fieldset class="mb-3">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">ラジオボタン</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios1" value="option1" checked>
          <label class="form-check-label" for="radios1">オプション1</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios2" value="option2">
          <label class="form-check-label" for="radios2">オプション2</label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="radios" id="radios3" value="option3" disabled>
          <label class="form-check-label" for="radios3">オプション3(無効)</label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="mb-3 row">
    <div class="col-sm-2">チェックボックス</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="check1">
        <label class="form-check-label" for="check1">チェックする</label>
      </div>
    </div>
  </div>
  <div class="mb-3 row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">サインイン</button>
    </div>
  </div>

js ラジオボタンをボタン表示に変更する:btn-check


  <div class="btn-group" data-bs-toggle="buttons">
    <input type="radio" class="btn-check" checked autocomplete="off">
    <label class="btn btn-secondary active">ラジオ1</label>
    <input type="radio" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">ラジオ2</label>
    <input type="radio" class="btn-check" autocomplete="off">
    <label class="btn btn-secondary">ラジオ3</label>
  </div>