blob: 887dacc12757a5fe65ab8b299073f2d18836ed64 (
plain)
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
68
69
70
71
72
73
74
75
76
|
import { FC, SelectHTMLAttributes } from 'react';
import styles from '../fields.module.scss';
export type SelectOptions = {
/**
* The option id.
*/
id: string;
/**
* The option name.
*/
name: string;
/**
* The option value.
*/
value: string;
};
export type SelectProps = Omit<
SelectHTMLAttributes<HTMLSelectElement>,
'disabled' | 'hidden' | 'required'
> & {
/**
* Should the select field be disabled?
*
* @default false
*/
isDisabled?: boolean;
/**
* Should the select field be hidden?
*
* @default false
*/
isHidden?: boolean;
/**
* Is the select field required?
*
* @default false
*/
isRequired?: boolean;
/**
* True if the field is required. Default: false.
*/
options: SelectOptions[];
};
/**
* Select component
*
* Render a HTML select element.
*/
export const Select: FC<SelectProps> = ({
className = '',
isDisabled = false,
isHidden = false,
isRequired = false,
options,
...props
}) => {
const selectClass = `${styles.field} ${styles['field--select']} ${className}`;
return (
<select
{...props}
className={selectClass}
disabled={isDisabled}
required={isRequired}
>
{options.map((option) => (
<option key={option.id} id={option.id} value={option.value}>
{option.name}
</option>
))}
</select>
);
};
|
