Handling Radio Buttons in mobx-react-form

Hi, Super cool project! The only issue that I’m finding with it, is that there’s no clear way to handle radio buttons (and their states) with this project. Here’s what I ultimately settled on in an effort to get radio buttons used with mobx-react-form

My fields looked something like [{name: 'question1', label: 'This is a question?', value: 'answer1', extra: ['answer1', 'answer2', 'answer3']}, {name: 'question2', label: 'This is also a question?', value: 'answer1', extra: ['answer1', 'answer2', 'answer3']}]

and to render them to the DOM I did something like

const questions = form.map((question, i) => {
    const answers = question.extra.map((answer, j) => (
        <div key={j}>
            <input {...question.bind()} type="radio" value={answer} checked={question.value === answer} />
        </div>
    )
    return (
        <div key={i}>
            <p>{question.label}</p>
            { answers }
        </div>
    )
}

But it feels bizarre to me to bind the input for each question to the radio button for the answer, and have to specify thechecked props for radio buttons. Is there any plan to add radio button support to this project?

[mancioshell]

Any news on radio button feature?

[SimeonC]

It would definitely be nice if I could just .bind a radio type like we can with a checkbox, though I can see how it’s not going to be easy (I had a quick look to see if I could make a PR but got lost in Fields/Bindings which I don’t understand yet).

I’ve added a slightly simpler example than @mprobber as it took me a while to figure out what he was doing.

// field definition
{
  name: 'gender',
  type: 'radio',
  label: 'accounts.account.gender',
  rules: 'required',
  default: GENDERS.NONE
}

// example render
<input
  {...form.select('gender').bind({
    value: GENDERS.NONE,
    checked: GENDERS.NONE === gender.value
  })}
/>
<input
  {...form.select('gender').bind({
    value: GENDERS.MALE,
    checked: GENDERS.MALE === gender.value
  })}
/>
<input
  {...form.select('gender').bind({
    value: GENDERS.FEMALE,
    checked: GENDERS.FEMALE === gender.value
  })}
/>