Input Group
입력과 단위, 접두어, 짧은 동작을 하나의 컨트롤로 묶습니다.
- 성숙도
- 후보
- 소스 경로
components/ui/input-group.tsx- 소스
- 소스
실제 미리보기
목록에서 먼저 읽히는 안내입니다.
사용할 때
사용 기준
URL 접두어, 단위, 검증 버튼처럼 입력과 직접 연결된 요소에 씁니다.
사용하지 않을 때
서로 독립적인 입력이나 여러 주요 행동을 한 경계 안에 넣지 않습니다.
변형과 상태
default고정 예시접두어와 동작이 입력값과 시각적으로 연결되는지 확인합니다.
목록에서 먼저 읽히는 안내입니다.
focus-visible직접 조작그룹 전체 경계가 초점 상태를 보여주는지 확인합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
목록에서 먼저 읽히는 안내입니다.
invalid고정 예시Field 오류와 그룹 경계가 같은 상태를 전달하는지 확인합니다.
목록에서 먼저 읽히는 안내입니다.
문서 안내를 확인해 주세요.
접근성
실제 입력은 하나만 두고 DOM 순서를 유지합니다. 기존 start와 end 별칭은 inline 위치로 정규화됩니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
placement | "inline-start" | "inline-end" | "block-start" | "block-end" | 아니요 | Addon의 논리적 위치입니다. start와 end는 호환 별칭입니다. |
children | ReactNode | 아니요 | Input 또는 Textarea와 Addon, Text, Button 조합입니다. |
사용 예시
지원 importimport {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
<InputGroupAddon placement="block-start">
<InputGroupText>Markdown supported</InputGroupText>
</InputGroupAddon>
<InputGroupTextarea aria-label="Guidance" />
<InputGroupAddon placement="block-end">
<InputGroupText>0 / 240</InputGroupText>
</InputGroupAddon>
</InputGroup>