Radio controls are another all-important input control that is widespread in the wild. Be sure to checkout the basic concepts guide for more info!
# Our basic checkbox can take on three different shapes: square, p-curve, p-round (although round makes the most sense):
Copy < div class = " pretty p-default p-round " >
< input type = " radio " />
< div class = " state " >
< label > Regular Radio </ label >
</ div >
</ div >
< div class = " pretty p-default " >
< input type = " radio " />
< div class = " state " >
< label > Square Radio </ label >
</ div >
</ div >
< div className = " pretty p-default p-curve " >
< input type = " radio " />
< div className = " state " >
< label > Curved Radio </ label >
</ div >
</ div >
# Radio supports colors , icons , animations .
There are five animations classes available that can be added to the root div: p-smooth, p-pulse, p-tada, p-jelly, and p-rotate.
Copy < div class = " pretty p-default p-round p-smooth " >
< input type = " radio " />
< div class = " state p-primary " >
< label > Smooth </ label >
</ div >
</ div >
< div class = " pretty p-icon p-round p-jelly " >
< input type = " radio " />
< div class = " state p-primary " >
< i class = " icon mdi mdi-check " > </ i >
< label > Jelly </ label >
</ div >
</ div >
< div class = " pretty p-icon p-round p-tada p-plain " >
< input type = " radio " />
< div class = " state " >
< i class = " icon mdi mdi-weather-night " > </ i >
< label > Tada </ label >
</ div >
</ div >
< div class = " pretty p-icon p-round p-rotate " >
< input type = " radio " />
< div class = " state p-danger-o " >
< i class = " icon mdi mdi-close " > </ i >
< label > Rotate </ label >
</ div >
</ div >
< div class = " pretty p-default p-round p-thick p-pulse " >
< input type = " radio " />
< div class = " state p-warning-o " >
< label > Pulse </ label >
</ div >
</ div >
# For accessibility reasons, it's ideal if we wrap our radio controls in a fieldset or another wrapping container with the correct ARIA roles .
Copy < fieldset >
< legend > Pizza Crust </ legend >
< div class = " pretty p-default p-round " >
< input id = " regular " type = " radio " name = " pizza " />
< div class = " state " >
< label for = " regular " > Regular crust </ label >
</ div >
</ div >
< div class = " pretty p-default p-round " >
< input id = " deep-dish " type = " radio " name = " pizza " />
< div class = " state " >
< label for = " deep-dish " > Deep dish </ label >
</ div >
</ div >
< div class = " pretty p-default p-round " >
< input id = " thin " type = " radio " name = " pizza " />
< div class = " state " >
< label for = " thin " > Thin crust </ label >
</ div >
</ div >
</ fieldset >
Pizza Crust # As mentioned before, PCR excels because it leverages built-in components instead of creating soft controls. Patterns such as roving focus/selection, space bar selection, etc. are all given to us for free because we're using real checkbox components. Take our pizza crust selection example above:
You can select using the space bar You can use your left/right arrow keys You can use your up/down arrow keys Selection cycles between elements when arrow keys are used