Form

Appearance

Resources
GitHub

Select ​

The select input type is used for dropdown selection from a predefined list of options. It provides a searchable dropdown interface with keyboard navigation and supports both static options and dynamic data loading.

Properties ​

Required Properties ​

  • name (string): Unique identifier for the field
  • type (string): Must be 'select'
  • label (string): Display label for the field

Optional Properties ​

  • placeholder (string): Hint text shown when no option is selected
  • options (array): Array of option objects with id and text properties
  • host (string): API host for dynamic data loading
  • prefix (string): API prefix for dynamic data loading
  • data (string): Data parameter for dynamic data loading
  • maxHeight (number): Maximum height of dropdown list, defaults to 400
  • disabled (boolean): Whether the field is disabled
  • layout (string): Layout type (default, horizontal)
  • rules (array): Validation rules for the field

Examples ​

Basic Select Field ​

typescript
{
  name: 'country',
  type: 'select',
  label: 'Country',
  placeholder: 'Select your country',
  options: [
    { id: 'us', text: 'United States' },
    { id: 'uk', text: 'United Kingdom' },
    { id: 'ca', text: 'Canada' },
    { id: 'au', text: 'Australia' },
    { id: 'de', text: 'Germany' },
    { id: 'fr', text: 'France' }
  ],
  rules: ['required']
}
Country*

Category Selection ​

typescript
{
  name: 'category',
  type: 'select',
  label: 'Product Category',
  placeholder: 'Choose a category',
  options: [
    { id: 'electronics', text: 'Electronics' },
    { id: 'clothing', text: 'Clothing & Fashion' },
    { id: 'books', text: 'Books & Media' },
    { id: 'home', text: 'Home & Garden' },
    { id: 'sports', text: 'Sports & Outdoors' },
    { id: 'automotive', text: 'Automotive' },
    { id: 'health', text: 'Health & Beauty' },
    { id: 'toys', text: 'Toys & Games' }
  ],
  rules: ['required']
}
Product Category*

Department Selection with Colors ​

typescript
{
  name: 'department',
  type: 'select',
  label: 'Department',
  placeholder: 'Select department',
  options: [
    { id: 'engineering', text: 'Engineering', color: '#3b82f6' },
    { id: 'marketing', text: 'Marketing', color: '#10b981' },
    { id: 'sales', text: 'Sales', color: '#f59e0b' },
    { id: 'hr', text: 'Human Resources', color: '#ef4444' },
    { id: 'finance', text: 'Finance', color: '#8b5cf6' },
    { id: 'support', text: 'Customer Support', color: '#06b6d4' }
  ],
  rules: ['required']
}
Department*

Priority Selection ​

typescript
{
  name: 'priority',
  type: 'select',
  label: 'Priority Level',
  placeholder: 'Select priority',
  options: [
    { id: 'low', text: 'Low Priority' },
    { id: 'medium', text: 'Medium Priority' },
    { id: 'high', text: 'High Priority' },
    { id: 'critical', text: 'Critical' }
  ],
  rules: ['required']
}
Priority Level*

Language Selection ​

typescript
{
  name: 'language',
  type: 'select',
  label: 'Programming Language',
  placeholder: 'Choose your language',
  options: [
    { id: 'javascript', text: 'JavaScript' },
    { id: 'typescript', text: 'TypeScript' },
    { id: 'python', text: 'Python' },
    { id: 'java', text: 'Java' },
    { id: 'csharp', text: 'C#' },
    { id: 'php', text: 'PHP' },
    { id: 'ruby', text: 'Ruby' },
    { id: 'go', text: 'Go' },
    { id: 'rust', text: 'Rust' },
    { id: 'swift', text: 'Swift' }
  ],
  rules: ['required']
}
Programming Language*

Timezone Selection ​

typescript
{
  name: 'timezone',
  type: 'select',
  label: 'Timezone',
  placeholder: 'Select your timezone',
  options: [
    { id: 'utc', text: 'UTC (Coordinated Universal Time)' },
    { id: 'est', text: 'EST (Eastern Standard Time)' },
    { id: 'cst', text: 'CST (Central Standard Time)' },
    { id: 'mst', text: 'MST (Mountain Standard Time)' },
    { id: 'pst', text: 'PST (Pacific Standard Time)' },
    { id: 'gmt', text: 'GMT (Greenwich Mean Time)' },
    { id: 'cet', text: 'CET (Central European Time)' },
    { id: 'jst', text: 'JST (Japan Standard Time)' }
  ],
  rules: ['required']
}
Timezone*

Complex Form with Multiple Select Inputs ​

typescript
const schema = [
  {
    name: 'country',
    type: 'select',
    label: 'Country',
    placeholder: 'Select your country',
    options: [
      { id: 'us', text: 'United States' },
      { id: 'uk', text: 'United Kingdom' },
      { id: 'ca', text: 'Canada' },
      { id: 'au', text: 'Australia' },
    ],
    rules: ['required'],
  },
  {
    name: 'category',
    type: 'select',
    label: 'Category',
    placeholder: 'Choose a category',
    options: [
      { id: 'electronics', text: 'Electronics' },
      { id: 'clothing', text: 'Clothing' },
      { id: 'books', text: 'Books' },
      { id: 'home', text: 'Home & Garden' },
    ],
    rules: ['required'],
  },
  {
    name: 'priority',
    type: 'select',
    label: 'Priority',
    placeholder: 'Select priority',
    options: [
      { id: 'low', text: 'Low Priority' },
      { id: 'medium', text: 'Medium Priority' },
      { id: 'high', text: 'High Priority' },
    ],
    rules: ['required'],
  },
];
Country*
Category*
Priority*

Best Practices ​

  1. Use descriptive placeholders that guide user selection
  2. Keep option text concise but informative
  3. Use colors sparingly to highlight important options
  4. Group related options logically in the list
  5. Provide a default selection when appropriate
  6. Use consistent naming for option IDs
  7. Consider search functionality for long option lists
  8. Test keyboard navigation for accessibility