Skip to main content

ReactSelectField

Description​

An enhanced select field powered by the react-select library. Provides advanced features like searchable dropdown, multi-select, custom styling, and better user experience compared to native select elements.

Import​

import { ReactSelectField } from '@components/common/form/ReactSelectField';

Usage​

import { Form } from '@components/common/form/Form';
import { ReactSelectField } from '@components/common/form/ReactSelectField';

function ProductForm() {
  const categoryOptions = [
    { value: 'electronics', label: 'Electronics' },
    { value: 'clothing', label: 'Clothing' },
    { value: 'books', label: 'Books' }
  ];

  return (
    <Form action="/api/products">
      <ReactSelectField
        name="category"
        label="Category"
        options={categoryOptions}
        placeholder="Select a category..."
      />
    </Form>
  );
}

Props​

NameTypeDefaultDescription
nameFieldPath<T>-Field name (required)
optionsSelectOption[]-Array of options (required)
labelstring-Label text displayed above the select
placeholderstring-Placeholder text when no option is selected
isMultibooleanfalseEnable multiple selection
isSearchablebooleantrueEnable search/filter functionality
isClearablebooleanfalseShow clear button to remove selection
isDisabledbooleanfalseDisable the select
defaultValueany-Default selected value(s)
requiredbooleanfalseMakes the field required
errorstring-Custom error message
helperTextstring-Helper text shown below the select
validationRegisterOptions<T>-React Hook Form validation rules
wrapperClassNamestring'form-field'CSS class for the wrapper div

SelectOption Interface​

interface SelectOption {
  value: any;
  label: string;
  [key: string]: any; // Additional custom properties
}

Example: Multi-Select​

import { Form } from '@components/common/form/Form';
import { ReactSelectField } from '@components/common/form/ReactSelectField';

function ProductForm() {
  const tagOptions = [
    { value: 'new', label: 'New Arrival' },
    { value: 'sale', label: 'On Sale' },
    { value: 'featured', label: 'Featured' },
    { value: 'trending', label: 'Trending' }
  ];

  return (
    <Form action="/api/products">
      <ReactSelectField
        name="tags"
        label="Product Tags"
        options={tagOptions}
        isMulti={true}
        placeholder="Select tags..."
        defaultValue={['new', 'featured']}
      />
    </Form>
  );
}

Example: Searchable with Clear Button​

import { Form } from '@components/common/form/Form';
import { ReactSelectField } from '@components/common/form/ReactSelectField';

function CustomerForm() {
  const countryOptions = [
    { value: 'us', label: 'United States' },
    { value: 'uk', label: 'United Kingdom' },
    { value: 'ca', label: 'Canada' },
    { value: 'au', label: 'Australia' },
    { value: 'de', label: 'Germany' }
  ];

  return (
    <Form action="/api/customers">
      <ReactSelectField
        name="country"
        label="Country"
        options={countryOptions}
        isSearchable={true}
        isClearable={true}
        placeholder="Search and select country..."
        required={true}
      />
    </Form>
  );
}

Example: With Validation​

import { Form } from '@components/common/form/Form';
import { ReactSelectField } from '@components/common/form/ReactSelectField';

function OrderForm() {
  const shippingOptions = [
    { value: 'standard', label: 'Standard Shipping (5-7 days)' },
    { value: 'express', label: 'Express Shipping (2-3 days)' },
    { value: 'overnight', label: 'Overnight Shipping (1 day)' }
  ];

  return (
    <Form action="/api/orders">
      <ReactSelectField
        name="shippingMethod"
        label="Shipping Method"
        options={shippingOptions}
        required={true}
        validation={{
          required: 'Please select a shipping method'
        }}
        helperText="Choose your preferred delivery speed"
      />
    </Form>
  );
}

Example: Custom Option Properties​

import { Form } from '@components/common/form/Form';
import { ReactSelectField } from '@components/common/form/ReactSelectField';

function ProductForm() {
  const supplierOptions = [
    { 
      value: 'supplier1', 
      label: 'Acme Corp',
      region: 'North America',
      rating: 5
    },
    { 
      value: 'supplier2', 
      label: 'Global Supplies Ltd',
      region: 'Europe',
      rating: 4
    }
  ];

  return (
    <Form action="/api/products">
      <ReactSelectField
        name="supplier"
        label="Supplier"
        options={supplierOptions}
        placeholder="Select supplier..."
      />
    </Form>
  );
}

Dependencies​

This component uses react-select library for enhanced select functionality. The library is included in EverShop dependencies.

Features​

  • Searchable: Type to filter options
  • Multi-Select: Select multiple options at once
  • Clearable: Option to clear selection
  • Keyboard Navigation: Full keyboard support
  • Custom Styling: Tailwind CSS integrated styles
  • Controller Integration: Uses React Hook Form Controller
  • Value Handling: Automatically handles single and multi-select values
  • Error Display: Shows validation errors
  • TypeScript Support: Full type safety with generics

Styling​

The component includes custom styles:

  • Border: Gray border with blue focus ring
  • Control height: Auto-adjusted
  • Hover effects: Subtle border color change
  • Focus state: Blue border with shadow
  • Integrates with form error states

Value Format​

  • Single select: Returns the selected option's value (e.g., 'electronics')
  • Multi-select: Returns array of values (e.g., ['new', 'featured'])