Radio & Switch Demo

Figma tasarımına göre oluşturulmuş Radio Button ve Switch componentleri

Radio Button

Basic Radio

Option 1

Option 2

Option 3

Sizes

Small

Medium (Default)

Large

States

Default

Checked

Disabled

Disabled Checked

Error State

Option with errorThis field is required

Radio Group (Vertical)

Option 1

Option 2

Option 3

Option 4 (Disabled)

Select one option

Selected: option1

Radio Group (Horizontal)

Small

Medium

Large

Extra Large

Switch (Toggle)

Basic Switch

Off

On

Sizes

Small

Medium (Default)

States

Default

Checked

Disabled

Disabled Checked

Interactive Switch

Toggle me

Switch is: OFF

Without Label

📐 Figma Reference

Bu componentler Figma tasarımına göre oluşturulmuştur:

Radio Button: 24x24px (1.5rem), Border: #E9EFF3, Checked: #4C6EF5
Switch: 52x28px (3.25rem x 1.75rem), Off: #E2E8F0, On: #4C6EF5
Figma Link: View in Figma