Shadcn Creatable Select

Enhance shadcn/ui Forms with a Dynamic Creatable Select Component

The shadcn-creatable-select component is a valuable addition for developers using shadcn/ui, offering the ability to transform standard select inputs into dynamic fields. Users can not only pick from a list of predefined options but also create new entries on the fly. This is particularly useful for scenarios like tagging systems, category creation, or any input where the available choices might expand based on user input, providing a more flexible and interactive user experience within your application.

Features:

• Creatable Options: Enables users to input and create new options directly within the select component if they don't find what they need in the existing list.
• shadcn/ui Compatibility: Designed as an extension for shadcn/ui, ensuring seamless integration and styling consistency.
• Configurable Input Name: Allows assigning a name attribute, essential for form handling and data submission (e.g., name="industry").
• Default Value Pre-selection: Supports setting an initial defaultValue for the select input, pre-filling the component.
• Asynchronous Loading State: Provides an isLoading prop to manage and display loading indicators during data fetching or option creation.
• Custom Option Creation Logic: Utilizes a mutate prop to define a function that handles the backend persistence or state update for newly created options.
• Dynamic Options Provision: Accepts an options prop to supply a list of available choices, which can be dynamically generated or fetched from an API.

Summary:

shadcn-creatable-select offers a straightforward way to implement select inputs where users can add new options dynamically within a shadcn/ui environment. It simplifies handling user-generated data for select fields by integrating props for default values, loading states, option mutation, and options lists. This component is ideal for developers looking to provide a more interactive and flexible data input experience, allowing users to expand the available choices as needed directly through the UI.