Input Group

입력 옆에 아이콘, 단위, 실행 버튼을 같은 표면 안에 붙여 보여 줄 때 사용합니다.

미리보기

검색·웹사이트·메시지 묶음

아이콘과 버튼이 있는 검색, 웹사이트 접두사, 보내기 버튼이 있는 여러 줄 메시지를 비교합니다.

검색

웹사이트

https://

메시지

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/input-group

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

검색·웹사이트·메시지 묶음

npx shadcn@latest add @neumorphism-ui/input-group @neumorphism-ui/label

Registry JSON

사용법

InputGroupInput 또는 InputGroupTextarea 옆에 필요한 addon과 버튼을 배치하세요. 실제 입력에 레이블을 연결하고 제출용이 아닌 버튼에는 type button을 지정합니다.

"use client";

import { useId } from "react";
import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group";
import { Label } from "@/components/ui/label";

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Amount in US dollars</Label>
      <InputGroup>
        <InputGroupAddon aria-hidden="true">$</InputGroupAddon>
        <InputGroupInput id={id} name="amount" inputMode="decimal" placeholder="0.00" />
      </InputGroup>
    </div>
  );
}

API 레퍼런스

InputGroupInput 또는 InputGroupTextarea에 앞뒤 addon, 보조 텍스트, button을 조합합니다. root의 focus-within 상태가 그룹 전체에 하나의 focus 표현을 제공합니다.

컴포넌트	속성	타입	기본값	설명
`InputGroup`	`children`필수	`React.ReactNode`	`—`	control, addon, text, button을 순서대로 배치합니다.
`InputGroup`	`aria-label / aria-labelledby`	`string`	`—`	role=group에 필요한 경우 그룹 전체의 이름을 제공합니다.
`InputGroupInput`	`native input props`	`React.ComponentProps<"input">`	`—`	id, name, type, value, onChange 등의 native 속성입니다.
`InputGroupTextarea`	`native textarea props`	`React.ComponentProps<"textarea">`	`—`	여러 줄 control의 native 속성입니다.
`InputGroupButton`	`type`	`"button" \| "submit" \| "reset"`	`"button"`	그룹 action의 버튼 유형입니다.

미리보기

검색·웹사이트·메시지 묶음

설치

사용법

API 레퍼런스

접근성