forked from github/plane
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import React from "react";
|
|
|
|
// react-hook-form
|
|
import { RegisterOptions, UseFormRegister } from "react-hook-form";
|
|
|
|
type Props = {
|
|
label?: string;
|
|
id: string;
|
|
name: string;
|
|
value?: string | number | readonly string[];
|
|
className?: string;
|
|
register?: UseFormRegister<any>;
|
|
disabled?: boolean;
|
|
validations?: RegisterOptions;
|
|
error?: any;
|
|
autoComplete?: "on" | "off";
|
|
options: { label: string; value: any }[];
|
|
size?: "rg" | "lg";
|
|
fullWidth?: boolean;
|
|
};
|
|
|
|
export const Select: React.FC<Props> = ({
|
|
id,
|
|
label,
|
|
value,
|
|
className = "",
|
|
name,
|
|
register,
|
|
disabled,
|
|
validations,
|
|
error,
|
|
options,
|
|
size = "rg",
|
|
fullWidth = true,
|
|
}) => (
|
|
<>
|
|
{label && (
|
|
<label htmlFor={id} className="text-gray-500 mb-2">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<select
|
|
id={id}
|
|
name={name}
|
|
value={value}
|
|
{...(register && register(name, validations))}
|
|
disabled={disabled}
|
|
className={`mt-1 block text-base border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md bg-transparent ${
|
|
fullWidth ? "w-full" : ""
|
|
} ${size === "rg" ? "px-3 py-2" : size === "lg" ? "p-3" : ""} ${className}`}
|
|
>
|
|
{options.map((option, index) => (
|
|
<option value={option.value} key={index}>
|
|
{option.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{error?.message && <div className="text-red-500 text-sm">{error.message}</div>}
|
|
</>
|
|
);
|