AmountInput

Description

금액 입력을 위한 특화된 Input 컴포넌트입니다. 숫자 입력 시 자동으로 천 단위 구분 쉼표를 추가하며, 삭제 아이콘과 커스텀 아이콘을 지원합니다.

"use client";

import { useState } from "react";
import { AmountInput } from "@/registry/ui/amount-input";

export const AmountInputDemo = () => {
  const [value, setValue] = useState(12345);

  return (
    <AmountInput
      value={value}
      onChange={setValue}
    />
  );
};

Installation

pnpx shadcn add @allra/amount-input

Usage

import { AmountInput } from "@/registry/ui/amount-input";

<AmountInput
  value={amount}
  onChange={setAmount}
/>

Props

Prop	Type	Default	Description
`value`	`number`	`undefined`	입력된 금액 값
`prefix`	`string`	`""`	금액 앞에 표시될 접두사
`suffix`	`string`	`"원"`	금액 뒤에 표시될 접미사
`onChange`	`(value: number) => void`	`undefined`	값 변경 시 호출되는 콜백
`onBlur`	`() => void`	`undefined`	포커스 해제 시 호출되는 콜백
`onFocus`	`() => void`	`undefined`	포커스 시 호출되는 콜백
`error`	`boolean`	`false`	에러 상태 여부
`disabled`	`boolean`	`false`	비활성화 상태 여부
`showDeleteIcon`	`boolean`	`true`	삭제 아이콘 표시 여부
`negative`	`boolean`	`false`	음수 표시 여부
`maxLength`	`number`	`10`	최대 입력 길이
`icon`	`React.ReactNode`	`undefined`	표시할 커스র্ম 아이콘
`deleteIconOnlyFocus`	`boolean`	`false`	포커스 시에만 삭제 아이콘 표시
`className`	`string`	`''`	추가 CSS 클래스

Features

천 단위 구분: 숫자 입력 시 자동으로 천 단위 구분 쉼표 추가
자동 포맷팅: 숫자가 아닌 문자는 자동으로 제거
삭제 아이콘: 값 삭제를 위한 아이콘 제공 (애니메이션 지원)
커스텀 아이콘: 원하는 아이콘을 표시할 수 있음
접두사/접미사: prefix와 suffix를 통해 금액 표현 커스터마이징
Controlled/Uncontrolled: 두 가지 모드 모두 지원
반응형: ResponsiveInput을 기반으로 반응형 크기 지원
에러 상태: 에러 시 빨간색 테두리 표시
비활성화: disabled 상태에서 회색 배경 표시

Examples

다양한 Props 예시

접두사 추가

금액 앞에 접두사를 추가한 예시입니다.

<AmountInputDemo defaultValue={1000000} prefix="₩" />

접미사 변경

기본 접미사를 변경한 예시입니다.

<AmountInputDemo defaultValue={50000} suffix=" won" />

삭제 아이콘 숨김

삭제 아이콘을 숨긴 예시입니다.

<AmountInputDemo defaultValue={10000} showDeleteIcon={false} />

에러 상태

에러 상태에서의 컴포넌트 동작을 보여줍니다.

<AmountInputDemo defaultValue={5000} error />

비활성화 상태

비활성화 상태에서의 컴포넌트 동작을 보여줍니다.

<AmountInputDemo defaultValue={3000} disabled />

포커스 시에만 삭제 아이콘

포커스 시에만 삭제 아이콘을 표시하는 예시입니다.

<AmountInputDemo defaultValue={2000} deleteIconOnlyFocus />

On this page