SearchInput

검색 아이콘과 클리어 버튼이 포함된 검색 전용 Input 컴포넌트

Description

SearchInput은 검색 기능을 위한 특화된 Input 컴포넌트입니다. 왼쪽에 검색 아이콘이 있고, 입력값이 있을 때 오른쪽에 클리어 버튼이 자동으로 나타납니다. Enter 키를 누르거나 검색 아이콘을 클릭하면 검색을 실행할 수 있습니다.

"use client";

import { useState } from "react";
import { SearchInput } from "@/registry/ui/search-input";

export const SearchInputDemo = () => {
  const [value, setValue] = useState("");

  return (
    <SearchInput
      value={value}
      onValueChange={setValue}
      placeholder="검색어를 입력하세요"
    />
  );
};

Installation

pnpx shadcn add @allra/search-input

Usage

import { SearchInput } from "@/registry/ui/search-input";

<SearchInput
  value={value}
  onValueChange={setValue}
  placeholder="검색어를 입력하세요"
/>

Props

Prop	Type	Default	Description
`value`	`string`	-	입력 필드의 값
`onValueChange`	`(value: string) => void`	-	값이 변경될 때 호출되는 콜백 함수
`onSubmit`	`() => void`	`undefined`	검색 제출 시 호출되는 콜백 함수
`variant`	`default` \| `destructive`	`default`	입력 필드의 스타일 변형
`size`	`xs` \| `sm` \| `default` \| `lg`	`default`	입력 필드의 크기
`responsiveSize`	`ResponsiveSizeConfig`	-	반응형 크기 설정
`error`	`boolean`	`false`	에러 상태 표시
`disabled`	`boolean`	`false`	비활성화 상태
`placeholder`	`string`	-	플레이스홀더 텍스트
`className`	`string`	-	추가 CSS 클래스

Examples

다양한 Props 예시

기본 사용법

검색어를 입력하면 클리어 버튼이 나타나며, Enter 키를 누르거나 검색 아이콘을 클릭하면 검색을 실행할 수 있습니다.

<SearchInputDemo defaultValue="검색어" />

플레이스홀더 설정

플레이스홀더를 통해 사용자에게 검색 유형을 안내할 수 있습니다.

<SearchInputDemo placeholder="상품명, 브랜드명을 입력하세요" />

에러 상태

검색 결과가 없거나 오류가 발생했을 때 입력 필드의 테두리가 빨간색으로 변경되어 시각적으로 알려줍니다.

<SearchInputDemo defaultValue="검색어" error />

비활성화 상태

입력 필드를 비활성화하여 사용자의 입력을 제한할 수 있습니다.

<SearchInputDemo defaultValue="검색어" disabled />

다양한 크기

입력 필드의 크기를 조절할 수 있습니다. xs, sm, default, lg 중에서 선택 가능합니다.

<SearchInputDemo defaultValue="검색어" size="sm" />

반응형 크기

화면 크기에 따라 자동으로 입력 필드의 크기가 조절됩니다. 모바일, 태블릿, 데스크톱 환경에 최적화된 크기를 설정할 수 있습니다.

<SearchInputDemo
  defaultValue="검색어"
  responsiveSize={{
    sm: "sm",
    md: "default",
    lg: "lg"
  }}
/>

검색 제출 핸들러

검색 아이콘을 클릭하거나 Enter 키를 누를 때 실행되는 콜백 함수를 등록할 수 있습니다.

<SearchInputDemo
  defaultValue="검색어"
  onSubmit={() => {
    console.log("검색 실행");
  }}
/>

On this page