Franklin Street - Radios - Molecules - Components

Custom Radio 1 Custom Radio 2

Disabled Radio 1 Disabled Radio 2

Custom Radio 3 Custom Radio 4

Radio required.

Custom Radio 5 Custom Radio 6

Elements of type radio are rendered by default as small circular icons that are selected when activated. Radio buttons allow you to select a single value out of a number of set choices for submission in a form. They are called radio buttons because they looks and operate in a similar manner to the push buttons on old-fasioned radios.

For a better UI/UX experience, we use a slightly more complex nesting of divs (just like we achieved with checkboxes) to create the clean look below. Coming soon, colors of the box can change based on the classes:


                    <div class="radios radios--icons">
                        <label class="radio--label" for="radio-custom">
                            Custom Checkbox
                            <input type="radio" class="radio" id="radio-custom" name="radio-custom" checked>
                            <span class="radio--icon"></span>
                        </label>
                    </div>

To utilize, Insert a radio-specific molecule partial called "RadioMolecule" via an Html Helper Extension method. Each item in the group will need to be passed in as a list of Radio. This class includes Id, Text, Value, and DataBind options for an individual radio button.

@Html.RadioMolecule("radio-name", new List<Mercury.DesignSystem.Models.Molecules.Radio>
           {
               new Mercury.DesignSystem.Models.Molecules.Radio
               {
                    Id = "radio 1",
                    Text = "Option 1",
                    Value = "1"
               },
               new Mercury.DesignSystem.Models.Molecules.Radio
               {
                    Id = "radio 2",
                    Text = "Option 2",
                    Value = "2"
               },
           })

Option 1 Option 2