SelectField

Description

A dropdown select field component that integrates with React Hook Form. Supports placeholder text and disabled options. It renders the Base UI Select composite (not a native <select>) and always emits a single scalar value — for multi-select, use ReactSelectField with isMulti.

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
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
disabled	boolean	-	Disables the select
id	string	field-{name}	Overrides the generated element id
onChange	(value: string | number) => void	-	Called with the selected value
className	string	-	Applied to the SelectTrigger

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: 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 Selection: Emits one scalar value
• 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

Related Components

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