Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 53x 53x | import React from "react";
interface Option {
value: string;
label: string;
}
interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
label?: string;
error?: string;
options: Option[];
placeholder?: string;
}
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
({ label, error, options, placeholder, className = "", ...props }, ref) => (
<div className="w-full">
{label && (
<label className="block text-sm font-medium text-ink mb-2">
{label}
{props.required && <span className="text-error-deep">*</span>}
</label>
)}
<select
className={`
w-full bg-glass border border-hairline rounded-pill px-4 py-3 text-ink
transition-shadow duration-200 ease-gentle
focus:outline-hidden focus:ring-2 focus:ring-primary
focus:border-transparent disabled:opacity-50 disabled:cursor-not-allowed
h-12 min-h-12
${error ? "border-error focus:ring-error" : ""}
${className}
`}
ref={ref}
{...props}
>
{placeholder && (
<option value="" disabled>
{placeholder}
</option>
)}
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
{error && <p className="text-error-deep text-sm mt-2">{error}</p>}
</div>
)
);
Select.displayName = "Select";
export { Select };
|