Redux-form <Field /> type prop not working for checkbox or radio

Question

Hi I'm new to redux forms and I wanted to know how do I use input types other than "text". I went through the documentation but anything other than type "text" and "email" is not working. For example, I want to use a type="checkbox" or "radio" but they do not appear on the browser output. I'm not sure what am I doing wrong here and what exactly is broken that they do not work. Any help would be highly appreciated.

Here is my reducers/index.js file

import {combineReducers} from 'redux';
import { reducer as reduxForm } from 'redux-form';
import dummyReducer from './dummyReducer';

export default combineReducers({
  dummyReducer: dummyReducer,
  form: reduxForm
});

Here is my React component I'm using redux form in

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';

class ServiceList extends Component {

  render () {
    return (
      <div>
        <label htmlFor="employed">Employed</label>
        <Field name="projectOwner" component="input" type="radio" />
      </div>
    );
  }
}

export default reduxForm({
  form: 'projectForm'
})(ServiceList);

Input fields with the type text (if used) are shown on the output but checkboxes and radio buttons are not working only the label I used for them appear. I apologize if there is some type of beginner level error here that it is not rendering.

Answer 1

You have to add value="some-text" property. Please try this code.

<Field name="projectOwner" value="some-text" component="input" type="radio" />
<Field name="projectOwner" value="another-text" component="input" type="radio" />

Answer 2

It was all because of Materialize CSS library that I was using on top of my plain old form. They have a separate syntax in order for checkbox or radio buttons to appear on the output. I just wanted to put this here if someone out there ran into the same beginner level issue.