컴포넌트
InputCharCounter
입력한 글자수를 세어 원형 진행 링으로 채움 비율을 보여주고 한계에 가까워지면 색이 바뀌는 글자수 카운터 입력 컴포넌트.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputCharCounter-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| maxLength | number | 120 | 최대 허용 글자수 (코드포인트 기준으로 카운트). |
| warnRatio | number | 0.85 | 경고 색(핑크)으로 전환되는 사용 비율(0~1). |
| hardLimit | boolean | true | true면 maxLength 초과 입력을 잘라내고, false면 초과 허용 후 빨강 경고만 표시. |
| multiline | boolean | true | 여러 줄 textarea(true) / 한 줄 input(false) 모드 전환. |
| ringSize | number | 56 | 원형 진행 링의 지름(px). |
| placeholder | string | 메시지를 입력하세요... | 입력 필드의 플레이스홀더 텍스트. |