Special input field for Redux-Form

reduxFormComponents.js

const renderSpecialInput = ({ input, label, type, meta: { touched, error }, divClass, icon, position = 'before' }) => (
  <div className={divClass ? divClass : ""}>
    <label>{label}</label>
    <div className="input-group">
      {icon && position === 'before' &&
        <span className="input-group-label">{icon}</span>
      }
      <input {...input} type={type} placeholder={label} className="input-group-field" />
      {touched && error && <span className="form-error is-visible">{error}</span>}
      {icon && position === 'after' &&
        <span className="input-group-label">{icon}</span>
      }
    </div>
  </div>
)

Just sharing some stuff I was using with Redux Forms
These are some examples of different input fields you can create.

<Field 
  name="percentage_fee" 
  component={renderSpecialInput}
  type="text"
  position="after"
  label="Percent fee"
  icon="%"
  divClass="large-3 medium-6 columns"
/>

<Field 
  name="dollar_fee" 
  component={renderSpecialInput}
  type="text"
  position="before"
  label="Fixed fee"
  icon="USD"
  divClass="large-3 medium-6 columns"
/>

I used Foundation for sites for styling.