Select
CoreBuild a dropdown selection with Root, Label, Trigger, Popover, and Item components.
Add tags with Enter and remove them with Backspace.
bun add @reopt-ai/opt-uiimport { TagInput } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
Tags: React, TypeScript
Comma, semicolon, or newline separated text is auto-split into tags.
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.
| 키 | 동작 |
|---|---|
| Enter | 태그 추가 |
| Backspace | 마지막 태그 삭제 (입력 비어있을 때) |
| ←/→ | 태그 간 이동 (Composite roving tabindex) |
| Delete | 포커스된 태그 삭제 |
| Ctrl+Z | 실행취소 |
| Ctrl+Shift+Z | 다시실행 |
Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.
Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.
Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.
Use a standalone text input with labels, errors, hints, and icons.
Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.
Enter multiline text with the same label, error, and hint API as Input.