Design
Guide

OXD Introduction Design Thinking UX Standards
UX Guidelines Form Design Patterns UX Rules & Lows Keyboard Accessibility
Visual Design
Colors Typograpy Images Icons Motion Animations
Grid & Layout
Main Layouts Grid System
Navigations
Sidebar Topbar
Componets
Buttons Text-box Check-box Radio Radio Pils Switch Search-box Multi Select Dropdown Number Dropdown Upload Inputs Upload input box Date picker Time picker Color picker Labels Help Lable Status lable Grupe Input Grupe Overlay Scroll-bar Count Slider Text-aria Comment-box Paginations Card loader Divider Progress Circle Progress Slider Upload-box Segments Autocomplete
Tables & List View Cards & Shaps Modals & Popups Advance Componets Charts
QA Standards
Developer
Serach Box
Radio Pils is an alternative solution for the traditional radio button 
                    
                      oxd.pills-area{
                        cursor: pointer;
                        padding-left: 5px;
                        border: 1px solid #e8eaef;
                        height: 50px;
                        padding: 14px 16px 0px;
                        text-align: center;
                        border-radius: 0.65rem;
                        }
                        oxd.pills-area -hover {
                        oxd-form-control-focus styles/#64728c
                        }
                        oxd.pills-area-inner-active { border-color: #ff7b1d
                        background-color: #ff7b1d- 6% opacity;
                        color: #ff7b1d
                        }
Status
Active
color : #929baa
border : 1px solid #e8eaef;
backgorund-color: #fff;
When Selected
color : #ff7b1d
border-color : #ff7b1d- #primerycolor1
backgorund-color: #primerycolor1 5%
hover
font-color : #64728c
background-color : #fff
border-color : #64728c
Readonly
color : #cfd3de;
backgorund-color: #fff;
border-color: #cfd3de;
Usecase
radio pill groupe exsaple
radio pill two groupe exsaple