radio

bootstrap5.css

bootstrap5.css
input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}
bootstrap5.css
.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}
bootstrap5.css
.input-group-text input[type="radio"],
.input-group-text input[type="checkbox"] {
  margin-top: 0;
}
bootstrap5.css
.custom-radio .custom-control-label::before {
  border-radius: 50%;
}
bootstrap5.css
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before {
  background-color: rgba(0, 123, 255, 0.5);
}

html bootstrap5 Sample

フォームタイトル：block-title-infoとfa-shopping-basket

formタイトル 

  <!-- 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タイトル
  </h3>
  <div class="form-row">
    <!-- 最小単位のセット、勝手に順番に２列で並んでいく -->
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4a">First name</label>
      <input type="text" class="form-control" id="text4a" placeholder="First name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="text4b">Last name</label>
      <input type="text" class="form-control" id="text4b" placeholder="Last name" />
    </div>
    <div class="form-group col-sm-6">
      <label for="select1a">Select:</label>
      <select id="select1a" class="form-control">
        <option>Select A</option>
        <option>Select B</option>
      </select>
    </div>
    <div class="form-group col-sm-6">
      <label for="file1">File:</label>
      <input type="file" id="file1" class="form-control-file" />
    </div>
    <div class="form-group 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="form-group 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>
    <div class="form-check">
      <input type="checkbox" class="form-check-input position-static" id="checkbox07" value="option1" aria-label="...">
    </div>
    <div class="form-check">
      <input type="radio" class="form-check-input position-static" name="blankRadio" id="blankRadio1" value="option1"
        aria-label="...">
    </div>
  </form>

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

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

カスタムのチェックボックスとラジオボタンを作成する：custom-checkboxとcustom-radio

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

水平配置のフォームを作成する：form-groupとrowとcol

ラジオボタン
チェックボックス
  <form>
    <div class="form-group 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="form-group 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="form-group">
      <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="form-group 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="form-group row">
      <div class="col-sm-10">
        <button type="submit" class="btn btn-primary">サインイン</button>
      </div>
    </div>
  </form>

入力グループ アドオンをチェックボックスやラジオボタンにする：input-group-append

  <!-- input=groupを使う -->
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="checkbox" aria-label="次のテキスト入力用のチェックボックス">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="チェックボックス付テキスト入力欄">
  </div>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div>
    </div>
    <input type="text" class="form-control" aria-label="ラジオボタン付テキスト入力欄">
  </div>

入力グループ 複数のアドオンを組み合わせる：input-group-append

$ 0.00
$ 0.00 
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <input type="radio" aria-label="次のテキスト入力用のラジオボタン">
      </div> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
    </div>
    <input type="text" class="form-control" aria-label="金額">
  </div>
  <div class="input-group">
    <input type="text" class="form-control" aria-label="金額">
    <div class="input-group-append"> <span class="input-group-text">$</span> <span class="input-group-text">0.00</span>
      <div class="input-group-text">
        <input type="checkbox" aria-label="前のテキスト入力用のチェックボックス">
      </div>
    </div>
  </div>

ラジオボタンをボタンに変更する：labelとbtnとdata-toggle=buttons

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