Is there any way to make React Material-UI radio buttons required

Question

I'm new at React JS. currently I'm using Material-UI for building small reusable components. Is there any way to make Material-UI radio buttons required?

like an input field showing "This field is required" text when empty

Stevens

Answer 1

You can use name property and add the required property to radio component (change the values to your value property):

<RadioGroup name="nameRadio" value={''}>
    <FormControlLabel
          value={'value1'}
          control={<Radio required={true} />}
          label={'Label 1'}
        />
     <FormControlLabel
          value={'value2'}
          control={<Radio required={true} />}
          label={'Label 2'}
        />
  </RadioGroup>

Vaughnvaught

Answer 2

Assuming that you have multiple radio buttons, you can make one of them selected by default. In the end, radio buttons indicate a choice, the user must choose one of them.

If this does not feel right to you, you can do custom validation.

Edmundson

Not sure why this is the accepted answer. @Vaughnvaught provides exactly what was asked for, without having to do "custom validation". – Barabbas