Schwitzz
27 lines
769 B
TypeScript
27 lines
769 B
TypeScript
import { useId, type SelectHTMLAttributes } from "react";
|
|
|
|
export interface SelectOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
|
label?: string;
|
|
options: SelectOption[];
|
|
}
|
|
|
|
export function Select({ label, options, id, className = "", ...rest }: SelectProps) {
|
|
const reactId = useId();
|
|
const selectId = id ?? `select-${reactId}`;
|
|
return (
|
|
<div className="ps-field">
|
|
{label && <label htmlFor={selectId} className="ps-field-label">{label}</label>}
|
|
<select id={selectId} className={`ps-select ${className}`.trim()} {...rest}>
|
|
{options.map((o) => (
|
|
<option key={o.value} value={o.value}>{o.label}</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
);
|
|
}
|