SelectField

A select dropdown component with basic validation.

The SelectField provides a styled, theme-aware select with a custom arrow, focus ring, and seamless integration with React Hook Form and Zod.

Preview

"use client";

import { zodResolver } from "@hookform/resolvers/zod";
import { useForm, FormProvider } from "react-hook-form";
import { z } from "zod";
import SelectField from "@/components/ui/SelectField";
import { schema } from "./select-field-schema";

export function SelectFieldBasicExample() {
  const methods = useForm<z.infer<typeof schema>>({
    resolver: zodResolver(schema),
    defaultValues: {
      country: "",
    },
  });

  const onSubmit = (data: z.infer<typeof schema>) => {
    console.log("Form data:", data);
    alert("Check the console for the form data!");
  };

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={methods.handleSubmit(onSubmit)}
        className="space-y-4 w-80"
      >
        <SelectField
          name="country"
          label="Country"
          options={[
            { label: "United States", value: "us" },
            { label: "Canada", value: "ca" },
            { label: "Mexico", value: "mx" },
          ]}
          placeholder="Select a country"
        />
        <button
          type="submit"
          className="form-button form-button-primary w-full"
        >
          Submit
        </button>
      </form>
    </FormProvider>
  );
}

Live playground

Preview

Label

Placeholder

Country

import { z } from "zod";
import { useForm, FormProvider } from "react-hook-form";
import SelectField from "@/components/ui/SelectField";

const schema = z.object({
  country: z.string().min(1, { message: "Please select a country." }),
});

export default function Example() {
  const methods = useForm({ defaultValues: { country: "" } });
  return (
    <FormProvider {...methods}>
      <form className="space-y-4 w-80">
        <SelectField
          name="country"
          label="Country"
          placeholder="Select a country"
          options={[{ label: "United States", value: "us" }, { label: "Canada", value: "ca" }, { label: "Mexico", value: "mx" }]}
        />
      </form>
    </FormProvider>
  );
}

Props

Name	Type	Default	Description
name*	string	-	The name attribute used for form registration.
label	string	-	Label displayed above the select input.
options	Array<{ label: string; value: string }>	-	Options to render inside the select element.