Handling Radio Buttons in mobx-react-form

[mprobber]

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?

[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
  })}
/>

[foxhound87]

The package doesn't provide a full support to Radio Buttons yet. I still don't know the right implementation, but I will find a way to properly support them. Thank you all for your use cases. PRs or other analysis are welcome!

[LennardWesterveld]

I think this is related to a checkboxes group @foxhound87? otherwise i will create a separate issue.

[WebTerminator]

I have a section with nested fields for multiple radios like the following. When I submit the form it gets all of the values for each field. Is there a way to specify only the field that was last selected or maybe a selected property?

        {
            // SELECT USER ROLE
            name: 'selectUserRole',
            label: 'Select User Role',
            fields: [
                {
                    name: 'user',
                    label: 'User',
                    value: 0
                },
                {
                    name: 'manager',
                    value: 1,
                    label: 'Manager'
                },
                {
                    name: 'purchaser',
                    value: 2,
                    label: 'Purchaser'
                },
                {
                    name: 'excecutive',
                    value: 3,
                    label: 'Executive'
                },
                {
                    name: 'account',
                    value: 4,
                    label: 'Account Admin'
                }
            ]
        },

[mancioshell]

Any news on radio button feature?

[foxhound87]

I couldn't find a better way to enhance the radio buttons, This is an example how I implemented the radios, which is the best way: https://codesandbox.io/s/form-quickstart--radio-vvj4qw I will updated the demo repo also with this example