| 'use client' |
|
|
| import React, { forwardRef, SelectHTMLAttributes, OptionHTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> { |
| label?: string |
| error?: string |
| options: { value: string; label: string }[] |
| placeholder?: string |
| } |
|
|
| export const Select = forwardRef<HTMLSelectElement, SelectProps>( |
| ({ className, label, error, options, placeholder, id, ...props }, ref) => { |
| const selectId = id || label?.toLowerCase().replace(/\s+/g, '-') |
|
|
| return ( |
| <div className="w-full"> |
| {label && ( |
| <label |
| htmlFor={selectId} |
| className="block text-sm font-medium text-current mb-1" |
| > |
| {label} |
| </label> |
| )} |
| <select |
| ref={ref} |
| id={selectId} |
| className={cn( |
| 'clay-input', |
| error && 'border-red-500 focus:ring-red-500', |
| className |
| )} |
| aria-invalid={error ? 'true' : 'false'} |
| {...props} |
| > |
| {placeholder && ( |
| <option value="" disabled> |
| {placeholder} |
| </option> |
| )} |
| {options.map((option) => ( |
| <option key={option.value} value={option.value}> |
| {option.label} |
| </option> |
| ))} |
| </select> |
| {error && ( |
| <p id={`${selectId}-error`} className="mt-1 text-sm text-red-600 dark:text-red-400" role="alert"> |
| {error} |
| </p> |
| )} |
| </div> |
| ) |
| } |
| ) |
|
|
| Select.displayName = 'Select' |
