Unify Radio, Check Box, Switch

[danielchalmers]

Feature request type

Enhance component

Component name

No response

Is your feature request related to a problem?

The Radio, Check Box, and Switch are all similar components but have very different implementations, leading to many differences.

Style

Placed together, the Check Box sticks out:

Right-to-left is even worse:

Code

MudCheckBox and MudSwitch are MudFormComponents but MudRadio isn't.

MudRadio can be placed in many more ways using the Placement enum:

MudBlazor/src/MudBlazor/Components/Radio/MudRadio.razor.cs

Line 21 in ec661b8

.AddClass($"mud-radio-content-placement-{ConvertPlacement(Placement).ToDescriptionString()}")

than MudCheckBox:

MudBlazor/src/MudBlazor/Components/CheckBox/MudCheckBox.razor.cs

Line 30 in ec661b8

.AddClass("flex-row-reverse", LabelPosition == LabelPosition.Start)

or MudSwitch:

MudBlazor/src/MudBlazor/Components/Switch/MudSwitch.razor.cs

Line 28 in ec661b8

.AddClass(LabelPosition == LabelPosition.End ? "" : "flex-row-reverse", true)

Describe the solution you'd like

Code and styles should be unified much further so they all work together as expected and feel like cohesive controls.
It should be explored if they can derive from a shared class.

All should align properly:

All should have Placement property instead of LabelPosition for more advanced aliginment.

Have you seen this feature anywhere else?

No response

Describe alternatives you've considered

No response

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[danielchalmers]

Not aligned in the DataGrid Sorting example: