field.jsx

import Input from './input';
import Label from './label';
import FormGroup from './form-group';

export default function Field ({children, name, inline, ...props}) {
  return (
    <FormGroup inline={ inline }>
      <Label inline={ inline } htmlFor={ name }>{ label }</Label>
      <Input inline={ inline } { ...props } id={ name }>
        { children }
      </Input>
    </FormGroup>
  )
}

form-group.jsx

function FormGroup (props) {
  return (
    <div className={`form-group ${inlineClass(props)} ${hasErroClass(props)}`}>
      {props.children}
    </div>
  );
}

function inlineClass (props) {
  return props.inline ? 'row' : '';
}

function hasErrorClass (props) {
  return props.meta && props.meta.touched && props.meta.error ? 'has-error' : '';
}

input.jsx

function Input ({name, ...props}) {
  return (
    <div className={inlineClass(props)}>
      <input { ...props } className="form-control" />
      { children }
    </div>
  );
}

function inlineClass(props) {
  return props.inline ? 'col-md-10' : '';
}