reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
IconPicker
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

IconPicker

Component

Search grouped icons using semantic Lucide keys or custom React nodes.

input
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { IconPicker } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

Controlled

Event Icon

Selected: click

Uncontrolled

Category Icon

Disabled

Locked

IconPicker

PropTypeDefaultDescription
valuestring—제어 모드: 선택된 아이콘 ID
onChange(iconId: string) => void—아이콘 변경 핸들러
iconsIconDef[]—아이콘 목록 (기본 24개 Lucide 아이콘 제공)
labelstring—입력 필드 레이블
disabledbooleanfalse비활성화 상태

컴포넌트 의존 관계

깊이
▲ USED BY (1)event-meta-editorIconPicker
View test results

테스트 커버리지

2026년 7월 9일10/10 통과
10성공
0실패
10전체
  • placeholder를 렌더링한다
  • 선택된 아이콘을 표시한다
  • label을 렌더링한다
  • disabled 상태를 지원한다
  • 클릭 시 검색 입력이 나타난다
  • error 메시지를 표시한다
  • label 없이 aria-label만 있어도 error를 aria-describedby로 연결한다
  • hint 텍스트를 표시한다
  • required prop이 RequiredMark를 표시한다
  • 커스텀 ReactNode 아이콘을 지원한다

Related components

opt-ui

Select

Core

Build a dropdown selection with Root, Label, Trigger, Popover, and Item components.

opt-ui

Combobox

Core

Build autocomplete search with an input, popover, items, groups, group labels, and an empty state.

opt-ui

Button

Core

Use accessible buttons with primary, secondary, ghost, and danger variants, three sizes, icons, loading, and aria-busy states.

opt-ui

Input

Core

Use a standalone text input with labels, errors, hints, and icons.

opt-ui

Switch

Core

Toggle a setting with three sizes and explicit accessible associations for labels and descriptions.

opt-ui

Textarea

Core

Enter multiline text with the same label, error, and hint API as Input.

PreviousColorPickerNextStepBuilder