Function NativeSelect

apps/web/ui/NativeSelect/index.tsx:28–76

({
  className,
  id,
  name,
  required,
  label,
  defaultValue,
  value,
  disabled = false,
  icon,
  onChange,
  onKeyDown,
  options,
  theme,
  style,
}: Props)

}

function NativeSelect({
  className,
  id,
  name,
  required,
  label,
  defaultValue,
  value,
  disabled = false,
  icon,
  onChange,
  onKeyDown,
  options,
  theme,
  style,
}: Props) {
  return (
    <>
      {label && <Label htmlFor={id}>{label}</Label>}
      <div
        className={classNames(className, styles.container, {
          [styles.blue]: theme === 'blue',
          [styles.gray]: theme === 'gray',
          [styles.disabled]: disabled,
        })}
      >
        {icon && <div className={styles.icon}>{icon}</div>}
        <select
          className={styles.select}
          id={id}
          style={style}
          name={id || name}
          required={required}
          defaultValue={defaultValue}
          value={value}
          disabled={disabled}
          onChange={onChange}
          onKeyDown={onKeyDown}
        >
          {options.map((option: Option, index: number) => (
            <option key={`${option.value}-${index}`} value={option.value}>
              {option.label}
            </option>
          ))}
        </select>
      </div>
    </>
  );
}

export default NativeSelect;