Framework | Library/Bootstrap

[Bootstrap] Radio

arajo 2022. 11. 23. 03:35
728x90

기본 라디오(세로)

<!-- Default radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1"/>
  <label class="form-check-label" for="flexRadioDefault1"> Default radio </label>
</div>

<!-- Default checked radio -->
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked/>
  <label class="form-check-label" for="flexRadioDefault2"> Default checked radio </label>
</div>

 

기본 라디오(가로)

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" />
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2" />
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>

<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled />
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

 

토글 버튼 라디오

<div class="btn-group">
  <input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" checked />
  <label class="btn btn-secondary" for="option1">Checked</label>

  <input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" />
  <label class="btn btn-secondary" for="option2">Radio</label>

  <input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" />
  <label class="btn btn-secondary" for="option3">Radio</label>
</div>