## Implementation Context - **Primary**: Use **SenangStart CSS** for the implementation. - **Reference**: Tailwind CSS is provided for stylistic context only. ## SenangStart CSS Usage To use SenangStart CSS, simply include the script in your HTML ``: ```html My App

Hello SenangStart!

Zero config, instant styling.

``` **Documentation**: [Getting Started Guide](https://bookklik-technologies.github.io/senangstart-css/guide/getting-started.html) # Radio Category: forms Description: Standard Radio Button ## Small Variant ### SenangStart CSS Code ```html <div layout="flex items:center"> <input id="radio-s" type="radio" value="" name="radio-group-s" space="w:medium h:medium" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-s" space="m-l:small" visual="text-size:small font:tw-medium text:gray-900">Radio S</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center"> <input id="radio-s" type="radio" value="" name="radio-group-s" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-s" class="ml-2 text-sm font-medium text-gray-900">Radio S</label> </div> ``` ## Medium Variant ### SenangStart CSS Code ```html <div layout="flex items:center"> <input id="radio-m" type="radio" value="" name="radio-group-m" space="w:medium-2x h:medium-2x" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-m" space="m-l:small" visual="text-size:base font:tw-medium text:gray-900">Radio M</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center"> <input id="radio-m" type="radio" value="" name="radio-group-m" class="w-5 h-5 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-m" class="ml-2 text-base font-medium text-gray-900">Radio M</label> </div> ``` ## Large Variant ### SenangStart CSS Code ```html <div layout="flex items:center"> <input id="radio-l" type="radio" value="" name="radio-group-l" space="w:medium-3x h:medium-3x" visual="text:blue-600 bg:gray-100 border:gray-300 focus:ring-color:blue-500 focus:ring:regular"> <label for="radio-l" space="m-l:small" visual="text-size:large font:tw-medium text:gray-900">Radio L</label> </div> ``` ### Tailwind CSS Code ```html <div class="flex items-center"> <input id="radio-l" type="radio" value="" name="radio-group-l" class="w-6 h-6 text-blue-600 bg-gray-100 border-gray-300 focus:ring-blue-500 focus:ring-2"> <label for="radio-l" class="ml-2 text-lg font-medium text-gray-900">Radio L</label> </div> ```