Skip to content
This repository was archived by the owner on Oct 3, 2023. It is now read-only.
This repository was archived by the owner on Oct 3, 2023. It is now read-only.

Component library - Radio Button Field #18

@fourstacks

Description

@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>

Metadata

Metadata

Assignees

Labels

FeatureOutline for feature

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions