Combobox

<FormField
          control={form.control}
          name="language"
          render={({ field }) => {
            const comboboxValue =
              typeof field.value === "string" && field.value.trim().length > 0
                ? field.value
                : "";
            const comboboxOptions = ["English","French","German","Spanish"];

            return (
              <FormItem className="flex flex-col">
                <FormLabel>Language</FormLabel>
                <Popover>
                  <PopoverTrigger asChild>
                    <FormControl>
                      <Button
                        variant="outline"
                        role="combobox"
                        className={cn(
                          "w-[200px] justify-between",
                          !comboboxValue && "text-muted-foreground"
                        )}
                        
                      >
                        {comboboxValue || "Select a language"}
                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
                      </Button>
                    </FormControl>
                  </PopoverTrigger>
                  <PopoverContent className="w-[200px] p-0">
                    <Command>
                      <CommandInput placeholder="Search options..." />
                      <CommandList>
                        <CommandEmpty>No option found.</CommandEmpty>
                        <CommandGroup>
                          {comboboxOptions.map((option) => (
                            <CommandItem
                              value={option}
                              key={option}
                              onSelect={() => {
                                field.onChange(option);
                                form.setValue(field.name, option, {
                                  shouldValidate: true,
                                  shouldDirty: true,
                                  shouldTouch: true
                                });
                              }}
                            >
                              <Check
                                className={cn(
                                  "mr-2 h-4 w-4",
                                  option === comboboxValue
                                    ? "opacity-100"
                                    : "opacity-0"
                                )}
                              />
                              {option}
                            </CommandItem>
                          ))}
                        </CommandGroup>
                      </CommandList>
                    </Command>
                  </PopoverContent>
                </Popover>
                <FormDescription>This is the language that will be used in the dashboard.</FormDescription>
                <FormMessage />
              </FormItem>
            );
          }}
        />