Skip to main content

Select

Select Field Component​

The Select field provides dropdown selection functionality, supporting both static options and dynamic data loaded from APIs. It's ideal for single or multi-select scenarios with large option sets.

Core Properties​

interface SelectFieldType extends BaseField {
  type: "select";
  options?: Array<string | { value: string | number, label: string | number }>;
  dynamicOptions?: {
    endpoint: string;                // API URL (supports {{fieldId}} placeholders)
    method?: "GET" | "POST";         // HTTP method (default: GET)
    dependsOn?: string | string[];   // Dependent fields for dynamic queries
    params?: Record<string, string>; // Query parameters
    transformResponse?: (data: any) => Option[]; // Convert API response
    fetchOnInit?: boolean;           // Load options on mount
  };
  placeholder?: string;             // Default prompt text
  isMulti?: boolean;                // Enable multi-select
}

Basic Usage​

function StaticSelectExample() {
  const schema = {
    formId: "static-select",
    fields: [{
      fieldId: "education",
      type: "select",
      label: "Highest Education",
      options: ["High School", "Bachelor's", "Master's", "PhD"],
      required: true,
      placeholder: "Select your degree"
    }]
  };
  return <DynamicForm formData={schema} />;
}

Label/Value Pairs​

{
  fieldId: "subscription",
  type: "select",
  options: [
    { value: "basic", label: "Basic Plan ($9.99)" },
    { value: "pro", label: "Pro Plan ($19.99)" }
  ],
  _defaultValue: "basic"
}

Dynamic Options from API​

Basic API Fetch​

{
  fieldId: "products",
  type: "select",
  dynamicOptions: {
    endpoint: "/api/products",
    transformResponse: (data) => 
      data.map(product => ({ 
        label: product.name, 
        value: product.id 
      }))
  }
}

Dependent Dropdowns​

{
  fieldId: "city",
  type: "select",
  dynamicOptions: {
    endpoint: "/api/cities",
    dependsOn: ["country"],  // Reload when country changes
    params: { 
      countryId: "{{country}}"  // Template placeholder
    }
  }
}

Advanced Features​

Multi-Select​

{
  fieldId: "skills",
  type: "select",
  isMulti: true, //add this to enable the multi-select
  options: ["JavaScript", "TypeScript", "React", "Node.js"]
}

Paginated API Results​

{
  fieldId: "users",
  type: "select",
  dynamicOptions: {
    endpoint: "/api/users",
    pagination: {
      pageSize: 20,
      loadMoreText: "Load more users..."
    }
  }
}

Validation Examples​

Required Selection​

{
  fieldId: "country",
  type: "select",
  required: true,
  requiredMessage: "Please select your country"
}

Minimum Selections​

{
  fieldId: "languages",
  type: "select",
  isMulti: true,
  validation: [{
    minItems: 2,
    message: "Select at least 2 languages"
  }]
}

Performance Tips​

  1. Debounce API Calls
    For searchable selects, add debouncing to dynamic options:
dynamicOptions: {
  endpoint: "/api/search?term={{search}}",
  debounce: 300 // ms delay
}
  1. Initial Data Loading
    Combine static and dynamic options for better UX:
options: [{ label: "Loading...", value: "" }], // Initial placeholder
dynamicOptions: {
  endpoint: "/api/options",
  fetchOnInit: true
}
  1. Accessibility
{
  fieldId: "accessible-select",
  type: "select",
  ariaLabel: "Select your preferred contact method",
  // Screen reader instructions:
  description: "Use arrow keys to navigate options"
}
Clicky