Button Groups
Use the .button-group
class and a combination of radio inputs (.button-group__radio
) and labels (.button-group__item
) to create segmented controls. This pattern should only be used when there are at least 3 buttons.
<div class= "button-group" >
<input class= "button-group__radio" type= "radio" id= "option_1" value= "option_1" name= "options" checked= "checked" >
<label class= "button-group__item" for= "option_1" > Option 1</label>
<input class= "button-group__radio" type= "radio" id= "option_2" value= "option_2" name= "options" >
<label class= "button-group__item" for= "option_2" > Option 2</label>
<input class= "button-group__radio" type= "radio" id= "option_3" value= "option_3" name= "options" >
<label class= "button-group__item" for= "option_3" > Option 3</label>
</div>
Small Button Groups
Simply use .button-group--small
to create a smaller version of the segmented button above.
<div class= "button-group--small" >
<input class= "button-group__radio" type= "radio" id= "option_4" value= "option_4" name= "options" checked= "checked" >
<label class= "button-group__item" for= "option_4" > Option 4</label>
<input class= "button-group__radio" type= "radio" id= "option_5" value= "option_5" name= "options" >
<label class= "button-group__item" for= "option_5" > Option 5</label>
<input class= "button-group__radio" type= "radio" id= "option_6" value= "option_6" name= "options" >
<label class= "button-group__item" for= "option_6" > Option 6</label>
</div>