reopt designreopt design
DocsExploreToolsPricingBuilder
로그인
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

AI 시대를 위한 디자인 시스템

  • 문서
  • 가격
  • 릴리즈 노트
  • GitHub
  • 서비스 약관
  • 개인정보처리방침

주식회사 리옵트사업자등록번호 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

Explore/Core/TagInput

TagInput

컴포넌트

태그 입력 컴포넌트. 텍스트를 입력하고 Enter로 태그를 추가, Backspace로 삭제합니다.

input
관련 문서
bun add @reopt-ai/opt-ui
100%

Controlled

Skills
ReactTypeScript

Tags: React, TypeScript

Max 5 tags

Interests
0/5

Disabled

Locked tags
fixedreadonly

Paste Support

Paste tags

Comma, semicolon, or newline separated text is auto-split into tags.

Keyboard Navigation

Use arrow keys to navigate between tags. Press Delete or Backspace to remove a focused tag. Ctrl+Z to undo, Ctrl+Shift+Z to redo.

Navigate me
AlphaBetaGamma

컴포넌트 의존 관계

깊이
▲ USED BY (1)event-meta-editorTagInput

테스트 커버리지

2026년 7월 9일18/18 통과
18성공
0실패
18전체
  • 초기 태그를 렌더링한다
  • Enter 키로 태그를 추가한다
  • 태그 삭제 버튼이 동작한다
  • maxTags 제한을 지원한다
  • label을 렌더링한다
  • suggestions 드롭다운을 표시한다
  • suggestions 클릭으로 태그를 추가한다
  • 이미 추가된 태그는 suggestions에서 제외한다
  • allowDuplicates=true면 기존 태그도 suggestions에 유지한다
  • suggestions 없이 기존 동작이 유지된다
  • 화살표 키로 태그 간 이동한다
  • 붙여넣기로 여러 태그를 추가한다
  • Backspace로 포커스된 태그를 삭제한다
  • Ctrl+Z로 실행취소한다
  • error 메시지를 표시한다
  • hint 텍스트를 표시한다
  • label 없이 aria-label만 있어도 hint를 입력에 aria-describedby로 연결한다
  • required prop이 RequiredMark를 표시한다

키보드 동작

키동작
Enter태그 추가
Backspace마지막 태그 삭제 (입력 비어있을 때)
←/→태그 간 이동 (Composite roving tabindex)
Delete포커스된 태그 삭제
Ctrl+Z실행취소
Ctrl+Shift+Z다시실행

관련 컴포넌트

Select

드롭다운 선택 컴포넌트. 5-part anatomy: Root, Label, Trigger, Popover, Item.

입력

Combobox

자동완성 검색 입력. 7 exports: Root, Input, Popover, Item, Group, GroupLabel, Empty.

입력

Button

접근성 버튼 컴포넌트. 4가지 변형(primary, secondary, ghost, danger), 3가지 크기, 로딩/아이콘과 aria-busy 상태를 지원합니다.

입력

Input

독립적인 텍스트 입력 컴포넌트. 레이블, 에러, 힌트, 아이콘 지원.

입력

Switch

토글 스위치 컴포넌트. 3가지 크기와 레이블/설명의 명시적 접근성 연결을 지원합니다.

입력

Textarea

멀티라인 텍스트 입력. Input과 동일한 API (label, error, hint).

입력
이전DateRangePicker다음ColorPicker

기본 사용

여러 Select

다중 선택

선택됨: react, svelte

기본 사용

그룹화

Variants

Sizes

States

Loading & Disabled

With Icons

Basic

With Hint

8자 이상 입력하세요

영문, 숫자만 사용 가능

Error State

이미 사용 중인 이름입니다

올바른 이메일 형식이 아닙니다

With Icons

원

Basic

알림 받기

새로운 업데이트를 알림으로 받습니다.

다크 모드

어두운 테마를 사용합니다.

마케팅 수신

프로모션 및 이벤트 정보를 받습니다.

Sizes

Small
Medium
Large

Disabled

Off (disabled)
On (disabled)

Without Label

Basic

With Hint

500자 이내로 작성하세요

Error State

필수 입력 항목입니다

Resize Options