Select

The Select component offers a dropdown menu for users to choose from predefined options, providing an efficient way to make selections in web applications

Basic

Result:

Code

// State variable selectedValue
const [selectValue, setSelectValue] = useState<string>();
.
. 
.
<Select onChange={(e)=>{
    setSelectValue(e.target.value);
}} value={selectValue} options={[{value :"", label:"Choose Your Country"},{value: "SG", label :"Singapore"}, {value: "US", label :"United States"}]}/>
.
. 
<p className="text-blue-500 dark:text-green-400">{selectedValue}</p>

Customization

Customize it with Tailwind CSS such as the width. E.g. customize the width to 2/5 of the full width

Result:

Code

<Select className="w-2/5" onChange={(e)=>{
                setSelectValue(e.target.value);
}} value={selectValue} options={[{value :"", label:"Choose Your Country"},{value: "SG", label :"Singapore"}, {value: "US", label :"United States"}]}/>