생성 드롭다운

선택 목록과 인라인 생성 폼을 하나의 드롭다운으로 묶는 컨텍스트 스위처다. '+ 새 항목' 클릭 시 Input + 만들기(Button primary) / 취소(Button ghost) 폼으로 전환된다. onCreate 는 비동기를 지원해 서버 액션을 직접 넘길 수 있다.

상태

전체 항목 포함 (allLabel)

전체 없음

아이콘 없음

allLabel 을 생략하면 '전체' 항목 없이 선택 목록만 표시된다.

활용 방법

프로젝트 스위처

헤더에서 현재 프로젝트를 전환하고 새 프로젝트를 인라인으로 생성하는 패턴.

Preview

tsx

<CreatableDropdown
  options={projects}
  value={currentProject}
  onChange={setProject}
  onCreate={async (name) => {
    const id = await createProject(name);
    router.push(`/projects/${id}`);
  }}
  allLabel="전체"
  createLabel="새 프로젝트"
  createPlaceholder="프로젝트 이름"
  icon={<FolderKanban size={14} />}
/>

태그 스위처 (allLabel 없음)

전체 항목 없이 태그·카테고리를 전환하는 패턴.

Preview

tsx

<CreatableDropdown
  options={tags}
  value={currentTag}
  onChange={setTag}
  onCreate={(name) => addTag(name)}
  createLabel="새 태그"
  createPlaceholder="태그 이름"
  icon={<Tag size={14} />}
/>

속성

이름	타입	기본값	설명
options	CreatableDropdownOption[]	-	{ value: string; label: string }[]: 선택 목록
value	string \| null	-	현재 선택값. null 이면 allLabel 활성
onChange	(value: string \| null) => void	-	항목 선택 시 호출
onCreate	(name: string) => void \| Promise<void>	-	생성 폼 제출 시 호출. 비동기 허용(서버 액션 직접 전달 가능)
createLabel	string	"새 항목"	"+ {createLabel}" 트리거 텍스트
createPlaceholder	string	"이름을 입력하세요"	인라인 input placeholder
allLabel	string	-	목록 상단 '전체' 항목 라벨. 생략 시 전체 항목 없음
icon	ReactNode	-	트리거 왼쪽 아이콘