30 / 47
Input Group
입력칸 앞뒤나 위아래에 아이콘·글자·버튼을 붙여 한 덩어리로 만듭니다. 검색창, 금액 입력, 코드 칸에 씁니다.
Basic
입력칸 앞에 아이콘, 뒤에 결과 수를 붙인 기본 형태입니다.
Inline Start
아이콘을 입력칸 앞쪽(왼쪽)에 둡니다.
아이콘을 앞쪽에 둔 형태입니다.
Inline End
아이콘을 입력칸 뒤쪽(오른쪽)에 둡니다. 비밀번호 보기 버튼에 흔합니다.
아이콘을 뒤쪽에 둔 형태입니다.
Block Start
입력칸 위쪽에 머리글 줄을 붙입니다. 파일 이름·복사 버튼을 얹은 코드 칸에 씁니다.
이름
입력칸 위쪽에 머리글을 붙였습니다.
script.js
여러 줄 입력칸 위쪽에 머리글을 붙였습니다.
Block End
입력칸 아래쪽에 바닥글 줄을 붙입니다. 글자 수·게시 버튼을 얹은 댓글 칸에 씁니다.
USD
입력칸 아래쪽에 바닥글을 붙였습니다.
0/280
여러 줄 입력칸 아래쪽에 바닥글을 붙였습니다.
Icon
검색·메일·카드 등 아이콘을 앞뒤에 다양하게 붙인 예시 모음입니다.
Text
'$', 'https://', '@company.com'처럼 고정 글자를 앞뒤에 붙입니다.
120자 남음
Kbd
오른쪽에 ⌘K 같은 단축키 힌트를 보여줍니다.
Dropdown
입력칸 안 버튼을 누르면 메뉴가 펼쳐집니다. 검색 범위 선택 같은 데 씁니다.
Spinner
처리 중임을 알리는 회전 표시를 입력칸 안에 넣습니다.
Textarea
여러 줄 입력칸 위아래에 도구 줄을 붙인 코드 편집기 모양입니다.
1행, 1열
script.js
Custom
직접 만든 입력 요소도 data-slot만 맞추면 같은 묶음 안에 넣을 수 있습니다.
RTL
아랍어처럼 오른쪽에서 왼쪽으로 읽는 언어용 배치입니다. 아이콘 위치가 뒤집힙니다.
아이콘과 글자 위치가 오른쪽에서 왼쪽으로 뒤집힙니다.