Custom Select Component Integration in a Form: Wrapping Trigger with Form Control

[mithatercan]

Hey everyone!

I've designed a custom select component and I'd like to integrate it into a form. However, I'm not sure how to enclose the trigger within a form control. What's the best approach to achieve this?

'use client';

import { useState } from 'react';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

interface Props {
  onSelect: (value: string) => void;
  value: string;
}

export function SelectLanguage({ onSelect, value }: Props) {

  return (
    <Select
      value={value}
      onValueChange={onSelect}
    >
      <SelectTrigger className="w-full">
        <SelectValue placeholder="Select a language" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="en">English</SelectItem>
        <SelectItem value="tr">Turkish</SelectItem>
        <SelectItem value="az">Azerbaijani</SelectItem>
        <SelectItem value="ru">Russian</SelectItem>
        <SelectItem value="ar">Arabic</SelectItem>
      </SelectContent>
    </Select>
  );
}