sos-nextjs/components/form/input.js

import React from 'react'

import styles from './styles.module.css'

export default function Input({label, hint, type, name, value, onChange, onBlur, isValid}){
  return (
    <div className={styles.formElementContainer}>
      <label htmlFor={name}>{label}:</label>
      <input className={isValid?'':styles.invalid} type={type} name={name} value={value} onChange={onChange} onBlur={onBlur} />
      <span className={styles.hint}>{hint}</span>
    </div>
  )
}