InputGroup
입력 필드 앞뒤에 아이콘, 텍스트, 버튼을 결합하는 입력 그룹 컴포넌트
개요
InputGroup 컴포넌트는 Input이나 Textarea 주변에 Addon(아이콘, 텍스트, 버튼)을 결합하여 하나의 입력 컨트롤처럼 보이게 하는 컴파운드 컴포넌트입니다. 검색 입력, 금액 입력, 비밀번호 표시 토글 등에 활용합니다.
주요 특징
- ✅ Addon 위치 제어:
inline-start,inline-end,block-start,block-end4방향 배치 - ✅ 크기 옵션: xs, sm, md, lg, xl 5가지 사이즈
- ✅ 포커스 통합: 내부 컨트롤 포커스 시 그룹 전체에 포커스 링 적용
- ✅ 버튼 내장: InputGroupButton으로 복사·토글 등 인라인 액션 지원
- ✅ Input/Textarea 지원: InputGroupInput, InputGroupTextarea 제공
- ✅ 상태 전파:
disabled,readOnly를 그룹 레벨에서 일괄 적용
사용 예시
기본 (아이콘 Addon)
Preview
텍스트 Addon (금액 입력)
Preview
버튼 Addon
InputGroupButton으로 복사, 표시 토글 등의 인라인 액션을 추가합니다.
Preview
Textarea + 하단 Addon
align="block-end"로 Addon을 입력 영역 아래에 배치합니다.
Preview
0 / 120자
Sizes
size prop으로 그룹 높이와 내부 컨트롤의 폰트 크기를 함께 조정합니다.
Preview
API Reference
InputGroup Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 그룹 높이 및 내부 여백 크기 |
disabled | boolean | - | 그룹 전체 비활성화 |
readOnly | boolean | - | 그룹 전체 읽기 전용 |
className | string | - | 추가 CSS 클래스 |
InputGroupAddon Props
| Prop | Type | Default | Description |
|---|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" | Addon 배치 위치 |
className | string | - | 추가 CSS 클래스 |
InputGroupButton Props
Button 컴포넌트의 props를 상속합니다.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | Button variant | "ghost" | 버튼 스타일 |
size | "xs" | "sm" | "icon-xs" | "icon-sm" | "xs" | 버튼 크기 |
type | "button" | "submit" | "reset" | "button" | 버튼 타입 |
InputGroupInput / InputGroupTextarea Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | 폰트 크기 |
나머지 props는 각각 Input, textarea 요소의 props를 그대로 전달합니다.
기본 사용법
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@vortex/ui-foundation"
;<InputGroup>
<InputGroupAddon>
<Search />
</InputGroupAddon>
<InputGroupInput placeholder="검색..." />
</InputGroup>접근성
- InputGroup 루트에
role="group"이 적용되어 보조 기술에 그룹으로 인식됩니다. - Addon 클릭 시 내부
input으로 포커스가 자동 이동합니다. - ✅ 아이콘만 있는 InputGroupButton에는 반드시
aria-label을 지정하세요. - ✅ Addon의 장식용 아이콘은 포인터 이벤트가 비활성화되어 입력을 방해하지 않습니다.
관련 컴포넌트
Last updated on