useChipField
useChipField는 Field.ChipInput의 칩과 입력 값을 가지고 있고, getChipInputProps()가 그 위에 펼쳐 넘깁니다. 커밋은 매번 transform을 거치고, 기본으로는 앞뒤 공백을 잘라 빈 값을 버립니다. 목록에 이미 있는 칩은 dedupe가 false가 아니면 버립니다. 필드 자체는 칩을 덧붙이지 않으므로, 훅이 없으면 부모의 onCommit이 결정합니다.
const field = useChipField({ initialChips: ['react'] })
<Field.Root aria-label="Tags">
<Field.ChipInput {...field.getChipInputProps()} placeholder="useChipField" />
</Field.Root>
react
언제 쓰나요
언제: Field.ChipInput을 위한 선택적 상태 도우미. 칩, 입력 값, 중복 제거, 커밋 시 transform.
쓰지 않을 때: 칩 상태를 이미 직접 가지고 있을 때 → Field.ChipInput props를 직접 연결하세요. 목록에서 고르기 → Combobox 레시피. 단일 값 → Field.TextInput.
Props
| 이름 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
| initialChips | string[] | 아니요 | [] | 시작 칩. |
| initialInputValue | string | 아니요 | "" | 시작 입력 텍스트. |
| dedupe | boolean | 아니요 | true | 이미 있는 값의 커밋을 건너뜁니다. |
| transform | (raw: string) => string | null | 아니요 | — | 커밋을 정규화합니다. null이면 거부합니다. 기본 동작은 공백을 제거하고 빈 값을 거부합니다. |