```
<div>
  <TextInput
    label="Text Input Required"
    type="text"
    help={{overlay: 'Example help!', placement: 'topLeft'}}
    mandatory
    value={state.value5}
    onChange={e => setState({value5: e.target.value})}
  />
  <p>Redux form 6</p>
  <TextInput
    label="Text Input Required"
    type="text"
    maxLength={150}
    mandatory
    input={{
      value: state.value6,
      onChange: e => setState({value6: e.target.value})
    }}
  />
  <h2>Checkable variant</h2>
  <TextInput
    label="Variant Checkable"
    type="text"
    value={state.value7}
    variant="checkable"
    onChange={e => setState({value7: e.target.value})}
  />
  <TextInput
    label="Variant Checkable (Redux form 6)"
    type="text"
    variant="checkable"
    input={{
      value: state.value8,
      onChange: e => setState({value8: e.target.value})
    }}
  />
  <TextInput
    label="Variant Checkable with getError"
    type="text"
    value={state.value9}
    variant="checkable"
    onChange={e => setState({value9: e.target.value})}
    getError={props => (!props.value)}
  />
  <TextInput
    label="Variant Checkable with getError (Redux form 6)"
    type="text"
    variant="checkable"
    input={{
      value: state.value10,
      onChange: e => setState({value10: e.target.value})
    }}
    getError={props => (!props.input.value)}
  />
</div>
```