입력 그룹
분류: 폼 요소
입력 필드에 버튼, 드롭다운, 아이콘, 로딩 스피너를 나란히 붙이는 .input-group 패턴 모음입니다. .input-group 안에 .form-control과 버튼·아이콘을 순서대로 배치하면 하나로 이어진 컨트롤처럼 렌더링되며, .input-icon/.input-icon-addon은 입력창 좌우에 아이콘만 겹쳐 표시할 때, .form-help는 입력 옆에 도움말 팝오버 버튼을 붙일 때 사용합니다.
소스
<div class="mb-3">
<label class="form-label">입력 그룹</label>
<div class="input-group mb-2">
<input type="text" class="form-control" placeholder="검색...">
<button class="btn" type="button">검색</button>
</div>
<div class="input-group">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
액션
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
액션
</a>
<a class="dropdown-item" href="#">
다른 액션
</a>
</div>
<input type="text" class="form-control" aria-label="드롭다운 버튼이 있는 텍스트 입력">
</div>
</div>
<div class="mb-3">
<label class="form-label">입력 그룹 버튼</label>
<div class="input-group">
<input type="text" class="form-control">
<button type="button" class="btn">액션</button>
<button data-bs-toggle="dropdown" type="button" class="btn dropdown-toggle dropdown-toggle-split"></button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">
액션
</a>
<a class="dropdown-item" href="#">
다른 액션
</a>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">아이콘 입력</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="검색…">
<span class="input-icon-addon">
<i class="f:20 ti ti-search"></i>
</span>
</div>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<i class="f:20 ti ti-user"></i>
</span>
<input type="text" class="form-control" placeholder="사용자명">
</div>
</div>
<div class="mb-3">
<label class="form-label">로더 입력</label>
<div class="input-icon mb-3">
<input type="text" class="form-control" placeholder="로딩 중…">
<span class="input-icon-addon">
<div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
</span>
</div>
<div class="input-icon mb-3">
<span class="input-icon-addon">
<div class="spinner-border spinner-border-sm text-secondary" role="status"></div>
</span>
<input type="text" class="form-control" placeholder="로딩 중…">
</div>
</div>
<div class="mb-3">
<label class="form-label">분리된 입력</label>
<div class="row g-2">
<div class="col">
<input type="text" class="form-control" placeholder="검색...">
</div>
<div class="col-auto">
<a href="#" class="btn btn-icon" aria-label="Button">
<i class="f:20 ti ti-search"></i>
</a>
</div>
</div>
</div>
<div class="mb-3">
<label class="form-label">도움말 아이콘이 있는 입력</label>
<div class="row g-2">
<div class="col">
<input type="text" class="form-control" placeholder="검색...">
</div>
<div class="col-auto align-self-center">
<span class="form-help" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="<p>우편번호는 미국 또는 캐나다 형식이어야 합니다. 더 정확한 주소를 위해 확장된 ZIP+4 코드를 사용할 수 있습니다.</p>
<p class='mb-0'><a href='#'>우편번호 조회 도구</a></p>
" data-bs-html="true">?</span>
</div>
</div>
</div>
사용된 주요 클래스
| 클래스 | 역할 |
|---|---|
align-self-center | 그리드 열을 세로 중앙에 정렬(Flexbox align-self: center) |
btn | 입력 그룹 안에 배치되는 기본 버튼 스타일 |
btn-icon | 텍스트 없이 아이콘만 담는 정사각형 버튼 |
col, col-auto | Bootstrap 그리드 열(가변 폭 / 콘텐츠 크기만큼 폭) |
dropdown-item, dropdown-menu, dropdown-menu-end | 드롭다운 메뉴 컨테이너와 항목, 오른쪽 정렬 메뉴 |
dropdown-toggle, dropdown-toggle-split | 드롭다운을 여는 버튼과, 버튼을 액션/토글 두 영역으로 분리하는 화살표 |
f:20 | master-css 표기로 아이콘 글자 크기 20px |
form-control | 입력 그룹 안 텍스트 입력의 기본 스타일 |
form-help | 입력 옆에 붙는 물음표 모양의 도움말(popover) 버튼 |
form-label | 입력 필드 위 라벨 텍스트 스타일 |
g-2 | 그리드 행의 열 사이 간격(gutter) |
input-group | 입력·버튼·아이콘을 하나로 이어 붙이는 컨테이너 |
input-icon, input-icon-addon | 입력창에 아이콘/스피너를 겹쳐 표시하는 컨테이너와 아이콘 영역 |
mb-2, mb-3 | 요소 사이 아래쪽 여백(margin-bottom) |
row | Bootstrap 그리드 행 |
spinner-border, spinner-border-sm | 원형 로딩 스피너와 작은 크기 변형 |
text-secondary | 보조 텍스트 색상(회색 계열) |
ti, ti-search, ti-user | Tabler Icons 기본 클래스와 검색·사용자 아이콘 |
참고 자료
실전 예제 페이지
HandStack 웹 호스트(wwwroot 모듈)를 기동한 뒤 /sample/ui-library/폼-요소-입력-그룹.html 경로에서 렌더링 결과를 확인할 수 있습니다.