React Select Input

How To Use

/* no scroll bar for react-select input field */
.no-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

Now, let's go through each component and helper function in detail. This will help you understand their purpose, how to use them, and where they fit best within your project.

Simple Select Component

About

This is a simple select component. You need to provide the options prop, and the component will render the selection list based on those options.

Import

First, import this component in the file where you want to use it.

import {
ReactSelect,
convertToOptions,
convertToOption,
} from "@/components/bloom/react-select-input";

Preview

You can now use it within your code as needed.

Accepted Props

This component accepts all the props supported by the default react-select base component.

View all available props in the official React Select documentation

Async Select Component

About

This is an async select component. You need to provide a loadOptions prop, which should be an asynchronous function that returns a promise. This allows you to fetch options dynamically from a backend or external API.

Import

First, import this component in the file where you want to use it.

import {
ReactAsyncSelect,
convertToOptions,
MyOption,
flattenOptions,
convertToOption,
} from "@/components/bloom/react-select-input";

Preview

You can now use it within your code as needed.

Accepted Props

This component accepts all the props supported by the default react-select async component.

View all available props in the official React Select documentation

Creatable Select Component

About

This is a creatable select component. It works with the options prop, just like a standard select. Additionally, it allows users to create and select new options that are not already in the list. This is useful when the available choices are dynamic or user-defined.

Import

First, import this component in the file where you want to use it.

import {
ReactCreatableSelect,
convertToOptions,
convertToOption,
} from "@/components/bloom/react-select-input";

Preview

You can now use it within your code as needed.

Accepted Props

This component accepts all the props supported by the default react-select creatable component.

View all available props in the official React Select documentation

Async Creatable Select Component

About

This is an async creatable select component. It requires a loadOptions prop, which should be an asynchronous function—typically used to fetch options from an API. In addition to loading options dynamically, it also allows users to create new options if the desired one doesn't already exist.

Import

First, import this component in the file where you want to use it.

import {
ReactAsyncCreatableSelect,
convertToOptions,
MyOption,
flattenOptions,
convertToOption,
} from "@/components/bloom/react-select-input";

Preview

You can now use it within your code as needed.

Accepted Props

This component accepts all the props supported by the default react-select async component.

View all available props in the official React Select documentation

Helper Functions

These functions help manipulate and transform options in a structured way.

flattenOptions

About

This utility function is used to convert grouped options into a flat array. It removes any nested structure and returns a single-level array of options, making it easier to work with components that expect flat data.

Import

You can import it like this and use it to convert group options to a single level

import { flattenOptions } from '@/components/bloom/react-select-input';

Accepted Parameters

convertToOption

About

Retrieves an option object based on a given string value and an array of options. This function is particularly useful for setting the default value or selected value in a single-select input.

Import

import { convertToOption } from '@/components/bloom/react-select-input';

Use

const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
color: convertToOption("", options),
},
});

Accepted Parameters

convertToOptions

Get an array of string and array of options and return the array of an option object to use in default value or value use if select accepts multiple values.

Import

import { convertToOptions } from '@/components/bloom/react-select-input';

Use

const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
color: convertToOptions(["smoothie", "juice"], groupedOptions),
},
});

Accepted Parameters

getFields

This function extracts a specific field from an array of selected option objects. It is especially useful in form submit handlers when you need to retrieve only a particular property (e.g., id, value, or label) from the selected options.

For example, if you have selected options with multiple fields but only need the value field for submission, this function helps simplify that extraction.

Import

import { getFields } from '@/components/bloom/react-select-input';

Accepted Parameters

Dependencies

This component depends on the react-select library.

View react-select Documentation