SelectField

Description

A dropdown select field component that integrates with React Hook Form. Supports single or multiple selection, placeholder text, and disabled options.

Import

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

Usage

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

function CategoryForm() {
  const categories = [
    { value: '1', label: 'Electronics' },
    { value: '2', label: 'Clothing' },
    { value: '3', label: 'Books' }
  ];

  return (
    <Form action="/api/products">
      <SelectField
        name="category"
        label="Category"
        options={categories}
        placeholder="Select a category"
        required
      />
    </Form>
  );
}

Props

Name	Type	Default	Description
name	FieldPath<T>	-	Field name (required)
options	SelectOption[]	-	Array of option objects (required)
label	string	-	Label text displayed above the select
placeholder	string	-	Placeholder text for empty selection
multiple	boolean	false	Allow multiple selections
defaultValue	string | number	-	Default selected value
required	boolean	false	Makes the field required
error	string	-	Custom error message
helperText	string	-	Helper text shown in a tooltip
validation	RegisterOptions<T>	-	React Hook Form validation rules
wrapperClassName	string	-	CSS class for the wrapper div
...props	SelectHTMLAttributes	-	All standard HTML select attributes

SelectOption Type

interface SelectOption {
  value: string | number;
  label: string;
  disabled?: boolean;
}

Example: Country Selector

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

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

  return (
    <Form action="/api/address">
      <SelectField
        name="country"
        label="Country"
        options={countries}
        placeholder="Select your country"
        required
      />
    </Form>
  );
}

Example: Multiple Selection

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

function InterestsForm() {
  const interests = [
    { value: 'tech', label: 'Technology' },
    { value: 'sports', label: 'Sports' },
    { value: 'music', label: 'Music' },
    { value: 'travel', label: 'Travel' }
  ];

  return (
    <Form action="/api/interests">
      <SelectField
        name="interests"
        label="Select Your Interests"
        options={interests}
        multiple
        helperText="Hold Ctrl/Cmd to select multiple"
      />
    </Form>
  );
}

Example: With Disabled Options

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

function SubscriptionForm() {
  const plans = [
    { value: 'free', label: 'Free Plan' },
    { value: 'basic', label: 'Basic Plan - $9/mo' },
    { value: 'pro', label: 'Pro Plan - $29/mo' },
    { value: 'enterprise', label: 'Enterprise Plan', disabled: true }
  ];

  return (
    <Form action="/api/subscription">
      <SelectField
        name="plan"
        label="Subscription Plan"
        options={plans}
        defaultValue="free"
        required
      />
    </Form>
  );
}

Example: With Default Value

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

function LanguageForm() {
  const languages = [
    { value: 'en', label: 'English' },
    { value: 'es', label: 'Spanish' },
    { value: 'fr', label: 'French' },
    { value: 'de', label: 'German' }
  ];

  return (
    <Form action="/api/language">
      <SelectField
        name="language"
        label="Preferred Language"
        options={languages}
        defaultValue="en"
        required
      />
    </Form>
  );
}

Features

• Single/Multiple Selection: Toggle with multiple prop
• Disabled Options: Mark specific options as disabled
• Placeholder Support: Show placeholder for empty selection
• Required Validation: Built-in validation for required selections
• TypeScript Support: Full type safety with generics

Notes

• When required is true, the component validates that a value is selected
• Empty string values are validated as empty
• For multiple selection, returns an array of selected values

Related Components

• Form - Parent form component
• RadioGroupField - Radio button selection
• CheckboxField - Checkbox selection
• ReactSelectField - Enhanced select with search