JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="TestFormCtrl1">
        <p>
            In this form (using value=), $scope.answer is initialized to boolean FALSE, but the "No" option is not selected by default. Selecting either "Yes" or "No" will put the form in a valid state and enable the submit button.
        </p>
        <form name="testForm">
            <p>
                <strong>Select an option:</strong>
            </p>
            <p>
                <label>Yes <input type="radio" ng-model="answer" value="true" ng-required="true" /></label>
    
                <label>No <input type="radio" ng-model="answer" value="false" /></label>
            </p>
        </form>
        
        <button ng-disabled="testForm.$invalid">Submit</button>
    </div>
    
    <hr />
    
    <div ng-controller="TestFormCtrl2">
        <p>
            In this form (using ng-value=), $scope.answer is initialized to boolean FALSE and the "No" option is selected by default. However, only the "Yes" option will put the form in a valid state and allow the user to submit. This arrangement makes it impossible to answer "No."
        </p>

        <form name="testForm">
            <p>
                <strong>Select an option:</strong>
            </p>
            <p>
                <label>Yes <input type="radio" ng-model="answer" ng-value="true" ng-required="true" /></label>
    
                <label>No <input type="radio" ng-model="answer" ng-value="false" /></label>
            </p>
        </form>
        
        <button ng-disabled="testForm.$invalid">Submit</button>
    </div>
</div>

JavaScript

function TestFormCtrl1($scope)
{
    $scope.answer = false;
}
TestFormCtrl1.$inject = ["$scope"];


function TestFormCtrl2($scope)
{
    $scope.answer = false;
}
TestFormCtrl2.$inject = ["$scope"];