ClearInput

Description

ClearInput은 입력값을 쉽게 초기화할 수 있는 클리어 버튼이 포함된 Input 컴포넌트입니다. 입력값이 있을 때만 클리어 버튼이 나타나며, 클릭 시 입력값을 즉시 초기화합니다.

"use client";

import { useState } from "react";
import { ClearInput } from "@/registry/ui/clear-input";

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

  return (
    <ClearInput
      value={value}
      onChange={setValue}
      placeholder="Enter text..."
    />
  );
};

Installation

pnpx shadcn add @allra/clear-input

Usage

import { ClearInput } from "@/registry/ui/clear-input";

<ClearInput
  value={value}
  onChange={setValue}
  placeholder="Enter text..."
/>

Props

Prop	Type	Default	Description
`onChange`	`(value: string) => void`	-	값이 변경될 때 호출되는 콜백 함수
`onSubmit`	`() => void`	`undefined`	폼 제출 시 호출되는 콜백 함수
`value`	`string`	-	입력 필드의 값
`placeholder`	`string`	-	플레이스홀더 텍스트
`disabled`	`boolean`	`false`	비활성화 상태
`className`	`string`	-	추가 CSS 클래스
`type`	`string`	`"text"`	입력 필드 타입
`autoComplete`	`string`	-	자동완성 설정
`autoFocus`	`boolean`	`false`	자동 포커스 여부
`readOnly`	`boolean`	`false`	읽기 전용 여부
`required`	`boolean`	`false`	필수 입력 여부
`maxLength`	`number`	-	최대 입력 길이
`minLength`	`number`	-	최소 입력 길이
`pattern`	`string`	-	입력 패턴
`name`	`string`	-	폼 필드 이름
`id`	`string`	-	요소 ID

Examples

다양한 Props 예시

기본 사용법

입력값이 있을 때 클리어 버튼이 자동으로 나타납니다.

<ClearInputDemo defaultValue="입력된 텍스트" />

플레이스홀더 설정

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

<ClearInputDemo placeholder="검색어를 입력하세요" />

비활성화 상태

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

<ClearInputDemo defaultValue="비활성화된 입력" disabled />

On this page