Component library - Radio Button Field

[fourstacks]

We need a radio button field that allows users to select one option from a predefined set of options.

For this first iteration we'll need to accept props for :

label (string) selected (mixed) choices * onChange (function) helpText (callback function - should take the value that has changed as an argument) error (string) name (string)

The choices prop should accept an array of choice objects. Each object should have the following fields:

label (string) helpText (string) value (string) disabled (boolean)

Styling should be informed by the TailwindUI styles found here:

https://tailwindui.com/components/application-ui/forms/form-layouts

This is the underlying static HTML with TailwindCSS classes for this field type:

<div class="mt-4">
    <div class="flex items-center">
        <input id="push_everything" name="form-input push_notifications" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
        <label for="push_everything" class="ml-3">
            <span class="block text-sm leading-5 font-medium text-gray-700">Everything</span>
        </label>
    </div>
    <div class="mt-4 flex items-center">
        <input id="push_email" name="form-input push_notifications" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
        <label for="push_email" class="ml-3">
            <span class="block text-sm leading-5 font-medium text-gray-700">Same as email</span>
        </label>
    </div>
    <div class="mt-4 flex items-center">
        <input id="push_nothing" name="form-input push_notifications" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
        <label for="push_nothing" class="ml-3">
            <span class="block text-sm leading-5 font-medium text-gray-700">No push notifications</span>
        </label>
    </div>
</div>