You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
20 lines
764 B
JavaScript
20 lines
764 B
JavaScript
4 years ago
|
import React from 'react'
|
||
|
|
|
||
|
|
import styles from './styles.module.css'
|
||
|
|
|
||
|
|
export default function Dropdown({label: _label, error, hint, name, options: _options, children, value, onChange, onBlur, isValid}){
|
||
|
|
const label = _label || name.replace(name[0], name[0].toUpperCase())
|
||
|
|
|
||
|
|
const options = children ? children : _options.map(opt => <option value={opt.value}>{opt.name}</option>)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={styles.formElementContainer}>
|
||
|
|
<label htmlFor={name}>{label}:</label>
|
||
|
|
<select className={(isValid && !error)?'':styles.invalid} name={name} value={value} onChange={onChange} onBlur={onBlur}>
|
||
|
|
{options}
|
||
|
|
</select>
|
||
|
|
{(hint || error) && <span className={styles.hint}>{error || (isValid ? '' : hint)}</span>}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|