January
February
March
April
May
June
July
August
September
October
November
December
FormSelect
Basic
<FormSelect label="Month of Birth" options={[ { label: "January", value: "1" }, { label: "February", value: "2" }, { label: "March", value: "3" }, { label: "April", value: "4" }, { label: "May", value: "5" }, { label: "June", value: "6" }, { label: "July", value: "7" }, { label: "August", value: "8" }, { label: "September", value: "9" }, { label: "October", value: "10" }, { label: "November", value: "11" }, { label: "December", value: "12" }, ]}/>Fixed height
<FormSelect label="Month of Birth" dropDownMenuClassName="max-h-80 overflow-auto" options={[ { label: "January", value: "1" }, { label: "February", value: "2" }, { label: "March", value: "3" }, { label: "April", value: "4" }, { label: "May", value: "5" }, { label: "June", value: "6" }, { label: "July", value: "7" }, { label: "August", value: "8" }, { label: "September", value: "9" }, { label: "October", value: "10" }, { label: "November", value: "11" }, { label: "December", value: "12" }, ]}/>Controlled
Select:
Select: 3
import { useState } from "react";import FormSelect from "@/ui/FormSelect";
const Controlled = () => { const [value1, setValue1] = useState(""); const [value2, setValue2] = useState("3");
return ( <div className="flex flex-col gap-6"> <div> <FormSelect label="Month of Birth" value={value1} onChange={setValue1} options={[ { label: "January", value: "1" }, { label: "February", value: "2" }, { label: "March", value: "3" }, { label: "April", value: "4" }, { label: "May", value: "5" }, { label: "June", value: "6" }, { label: "July", value: "7" }, { label: "August", value: "8" }, { label: "September", value: "9" }, { label: "October", value: "10" }, { label: "November", value: "11" }, { label: "December", value: "12" }, ]} dropDownMenuClassName="max-h-80 overflow-auto" />
<p>Select: {value1}</p> </div>
<div> <FormSelect label="Month of Birth (with default value)" value={value2} onChange={setValue2} options={[ { label: "January", value: "1" }, { label: "February", value: "2" }, { label: "March", value: "3" }, { label: "April", value: "4" }, { label: "May", value: "5" }, { label: "June", value: "6" }, { label: "July", value: "7" }, { label: "August", value: "8" }, { label: "September", value: "9" }, { label: "October", value: "10" }, { label: "November", value: "11" }, { label: "December", value: "12" }, ]} dropDownMenuClassName="max-h-80 overflow-auto" />
<p>Select: {value2}</p> </div> </div> );};
export default Controlled;Uncontrolled (with <form>)
import { useState, type FormEventHandler } from "react";import FormSelect from "@/ui/FormSelect";
const Uncontrolled = () => { const [formDataObj, setFormDataObj] = useState<Record<string, FormDataEntryValue>>();
const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => { event.preventDefault();
const formData = new FormData(event.currentTarget); const updates = Object.fromEntries(formData);
setFormDataObj(updates); };
return ( <form onSubmit={handleSubmit} className="flex flex-col gap-6"> <FormSelect required name="monthOfBirth" label="Month of Birth" options={[ { label: "January", value: "1" }, { label: "February", value: "2" }, { label: "March", value: "3" }, { label: "April", value: "4" }, { label: "May", value: "5" }, { label: "June", value: "6" }, { label: "July", value: "7" }, { label: "August", value: "8" }, { label: "September", value: "9" }, { label: "October", value: "10" }, { label: "November", value: "11" }, { label: "December", value: "12" }, ]} dropDownMenuClassName="max-h-80 overflow-auto" /> <FormSelect name="whatWouldYouLikeToDrink" label="What would you like to drink?" defaultValue="tea" options={[ { label: "Coffee", value: "coffee" }, { label: "Tea", value: "tea" }, { label: "Others", value: "others" }, ]} /> <button type="submit" className="border"> Submit </button>
<p>formDataObj: {JSON.stringify(formDataObj)}</p> </form> );};
export default Uncontrolled;