This repository was archived by the owner on Oct 3, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
This repository was archived by the owner on Oct 3, 2023. It is now read-only.
Component library - Radio Button Field #18
Copy link
Copy link
Open
Labels
FeatureOutline for featureOutline for feature
Description
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>
Metadata
Metadata
Assignees
Labels
FeatureOutline for featureOutline for feature