Input Group
설치 확인앞뒤 아이콘·버튼이 붙은 입력
1. 목적과 출처
앞뒤 아이콘·버튼이 붙은 입력
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/input-group.tsx- Registry
@adcapsule/input-group
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 조합 | 모양 |
|---|---|
| 앞 아이콘 inline-start | |
| 뒤 글자 inline-end | |
| 뒤 버튼 InputGroupButton | |
| 뒤 단축키 Kbd | |
| 여러 줄 + 아래 버튼 block-end |
3. 속성 바꿔 보기
앞
뒤
4. 설치와 사용
- npm 패키지
- class-variance-authority
- 함께 설치
- @adcapsule/button, @adcapsule/input, @adcapsule/textarea, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- 덧붙임 위치(align: inline-start·inline-end·block-start·block-end)
- 아이콘·글자·버튼 조합
- InputGroupTextarea로 여러 줄
공통으로 유지할 토큰
- border.strong (테두리)
- text.secondary (덧붙임 글자)
- control.height.md
- radius.md (바깥 틀 6px)
- radius.sm (안쪽 버튼·단축키 4px)