# Radio

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Radio

 RbRadio and RbRadioGroup components provide single-selection radio buttons with support for horizontal/vertical layouts, colors, icons, and variants.

 Basic Usage

 Simple radio button groups with vertical and horizontal layouts.

 Show code

 Vertical Layout (Default)

 Option 1 

 Option 2 

 Option 3 

 Option 4 

 Horizontal Layout

 Small 

 Medium 

 Large 

 Horizontal with Wrap

 One 

 Two 

 Three 

 Four 

 Five 

 Six 

 Vertical Selection: Option 1

 Horizontal Selection: Medium

 Wrapped Selection: 1

 Variants

 Different visual styles: Default, Outlined and Filled variants.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Default Variant

 Option A 

 Option B 

 Option C 

 Outlined Variant

 Option A 

 Option B 

 Option C 

 Filled Variant

 Option A 

 Option B 

 Option C 

 Default: A

 Outlined: B

 Filled: C

 With Labels

 Radio buttons with text labels and ChildContent.

 Show code

 Simple Text Labels

 Apple 

 Banana 

 Cherry 

 Rich Content Labels

 Basic Plan 
 $9.99/month

 Pro Plan 
 $19.99/month

 Enterprise Plan 
 $49.99/month

 Horizontal with Labels

 Option 1 
 Description 

 Option 2 
 Description 

 Option 3 
 Description 

 Fruit: apple

 Plan: basic

 Option: 1

 Hover Effect

 Enable hover effect for better user interaction feedback.

 Show code

 Without Hover (Default)

 Option 1 

 Option 2 

 Option 3 

 With Hover Effect

 Option 1 

 Option 2 

 Option 3 

 Hover with Different Colors

 Primary 

 Success 

 Warning 

 Danger 

 Without Hover: Option 1

 With Hover: Option 2

 Colored Hover: primary

 Position & Align

 Control icon position (Left/Right) and text alignment (Left/Center/Right).

 Show code

 StartAligned

 Approve 

 Reject 

 Pending 

 EndAligned + IconRight

 Approve 

 Reject 

 Pending 

 CenterAligned + IconTop

 Home 

 User 

 Settings 

 CenterAligned + IconBottom

 Home 

 User 

 Settings 

 JustifyAligned + IconLeft

 Approve 

 Reject 

 Pending 

 Justify + IconRight

 Approve 

 Reject 

 Pending 

 Readonly & Disabled

 Control interaction states with Readonly and Disabled parameters.

 Show code

 Normal

 Option 1 

 Option 2 

 Option 3 

 Readonly Group

 Option 1 

 Option 2 

 Option 3 

 Disabled Group

 Option 1 

 Option 2 

 Option 3 

 Individual Disabled Items

 Option 1 

 Option 2 (Disabled) 

 Option 3 

 Option 4 (Disabled) 

 Normal: Option 1

 Readonly: Option 2

 Disabled: Option 3

 Individual: Option 1

 RTL Support

 Compare logical alignment behavior inside an RTL container.

 Show code

 الملف الشخصي 

 تحديثات البريد 

 المصادقة الثنائية 

 ✕

 Contents