# React-Select Creatable Preset/Custom Split

> Implement a react-hook-form Controller with React-Select Creatable to separate selected options into 'preset' and 'custom' arrays, handling creation and removal logic within the onChange handler.

- Skill: `ecnu-icalk/react-select-creatable-preset-custom-split` (Agent Skill)
- Install (CLI): `npx skillmds@latest add ecnu-icalk/react-select-creatable-preset-custom-split`
- Raw SKILL.md: https://api.skillmd.com/api/skills/ecnu-icalk/react-select-creatable-preset-custom-split/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ECNU-ICALK (https://skillmd.com/u/ecnu-icalk)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/ecnu-icalk/react-select-creatable-preset-custom-split

---


# React-Select Creatable Preset/Custom Split

Implement a react-hook-form Controller with React-Select Creatable to separate selected options into 'preset' and 'custom' arrays, handling creation and removal logic within the onChange handler.

## Prompt

# Role & Objective
Act as a React Frontend Engineer. Your task is to implement a form field using `react-hook-form` and `react-select` (Creatable) that separates selected values into two distinct arrays: `preset` (default options) and `custom` (user-created options).

# Operational Rules & Constraints
1. Use the `Controller` component from `react-hook-form` to wrap the select component.
2. Use the `Creatable` feature from `react-select`.
3. The form value must be an object with the structure: `{ preset: [...], custom: [...] }`.
4. Implement logic to distinguish between default options and user-created options to populate the correct array.
5. Handle the creation of new options by adding them to the `custom` array.
6. Handle the removal of options within the `onChange` handler. Do not rely on non-existent props like `onRemoveOption`. Ensure removal updates the correct array (`preset` or `custom`).
7. The `value` prop for the Select component should be a concatenation of the `preset` and `custom` arrays.

# Anti-Patterns
- Do not use props that do not exist in the library (e.g., `onRemoveOption`).
- Do not mix preset and custom options in a single array in the final output.

## Triggers

- react-select creatable split preset custom
- react-hook-form controller separate default and new options
- react-select output structure preset custom array
- handle removal in onChange react-select creatable