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 56 57 58 59 60 61 62 63 64 65 66 67 | 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 4x 4x 4x 4x 4x 4x 2x 2x 2x 2x 2x 2x 1x 1x 1x | import React from 'react';
import classNames from 'classnames';
import './Select.css';
export interface SelectOption {
value: string | number;
label: string;
disabled?: boolean;
}
interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
label?: string;
options: SelectOption[];
error?: string;
helperText?: string;
size?: 'sm' | 'md' | 'lg';
fullWidth?: boolean;
}
const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
({ label, options, error, helperText, size = 'md', fullWidth = false, className, ...props }, ref) => {
const selectId = props.id || `select-${Math.random().toString(36).substr(2, 9)}`;
return (
<div className={classNames('select-group', { 'w-100': fullWidth })}>
{label && (
<label htmlFor={selectId} className="form-label">
{label}
{props.required && <span className="text-danger ms-1">*</span>}
</label>
)}
<select
ref={ref}
id={selectId}
className={classNames(
'form-select',
`form-select-${size}`,
{
'is-invalid': error,
},
className
)}
{...props}
>
{options.map((option) => (
<option
key={option.value}
value={option.value}
disabled={option.disabled}
>
{option.label}
</option>
))}
</select>
{error && <div className="invalid-feedback d-block">{error}</div>}
{helperText && !error && (
<div className="form-text">{helperText}</div>
)}
</div>
);
}
);
Select.displayName = 'Select';
export default Select;
|