Selectors
Simple
By default the box selectors are aligned horizontal, based on its icon + text position, and text is always left aligned.
Compound
There are some cases where you gonna need to include a description for the items.
Simple
You can vertical align box selectors where its text will always be center aligned and icon will be placed on top of text.
Compound
There are some cases where you gonna need to include a description for the items.
Auto-Width Columns
Not matter how many elements are, they all will be placed in one row.
<div class="sui-box-selectors">...</div>
1 Column
The elements will occupy the full-width of the row.
<div class="sui-box-selectors sui-box-selectors-col-1">...</div>
2 Columns
The elements will have 50% width and will be placed a max of two elements per row.
<div class="sui-box-selectors sui-box-selectors-col-2">...</div>
3 Columns
Elements will ocuppy a third of a row, allowing a max of 3 elements to be placed per row.
<div class="sui-box-selectors sui-box-selectors-col-3">...</div>
4 Columns
Elements will ocuppy a fourth of a row, allowing a max of 4 elements to be placed per row.
<div class="sui-box-selectors sui-box-selectors-col-4">...</div>
5 Columns
Elements will ocuppy a fifth of a row, allowing a max of 5 elements to be placed per row.
<div class="sui-box-selectors sui-box-selectors-col-5">...</div>
Base Structure
<div class="sui-box-selectors"> <ul role="radiogroup"> <li><label for="unique-id" class="sui-box-selector"> <input type="radio" id="unique-id" aria-labelledby="unique-label-id" /> <span aria-hidden="true"> <span id="unique-label-id" aria-hidden="true">Element text</span> </span> </label></li> <li><label for="unique-id" class="sui-box-selector"> <input type="radio" id="unique-id" aria-labelledby="unique-label-id" /> <span aria-hidden="true"> <span id="unique-label-id" aria-hidden="true">Element text</span> </span> </label></li> </ul> </div>
Elements Structure
To get a vertical element, it's necessary to add sui-box-selector-vertical class next to sui-box-selector.
<!-- Single Choice (Radio) When you need user to pick one option only --> <li><label for="item-id" class="sui-box-selector"> <input type="radio" name="item-radio-input" id="item-id" checked="checked" aria-labelledby="unique-label-id" aria-describedby="unique-desc-id" /> <span aria-hidden="true"> <span class="sui-icon-info"></span> <span id="unique-label-id" aria-hidden="true">Item Name</span> </span> <span id="unique-desc-id" aria-hidden="true">Here comes some description for your item.</span> </label></li> <!-- Multiple Choice (Checkbox) When you allow user to select more than one option --> <li><label for="item-id" class="sui-box-selector"> <input type="checkbox" name="item-checkbox-input" id="item-id" checked="checked" aria-labelledby="unique-label-id" aria-describedby="unique-desc-id" /> <span aria-hidden="true"> <span class="sui-icon-info"></span> <span id="unique-label-id" aria-hidden="true">Item Name</span> </span> <span id="unique-desc-id" aria-hidden="true">Here comes some description for your item.</span> </label></li>
Grid Variations
<!-- Auto Width Columns --> <div class="sui-box-selectors"> <ul> ... </ul> </div> <!-- 1 Column Per Row --> <div class="sui-box-selectors sui-box-selectors-col-1"> <ul> ... </ul> </div> <!-- 2 Columns Per Row --> <div class="sui-box-selectors sui-box-selectors-col-2"> <ul> ... </ul> </div> <!-- 3 Columns Per Row --> <div class="sui-box-selectors sui-box-selectors-col-3"> <ul> ... </ul> </div> <!-- 4 Columns Per Row --> <div class="sui-box-selectors sui-box-selectors-col-4"> <ul> ... </ul> </div> <!-- 5 Columns Per Row --> <div class="sui-box-selectors sui-box-selectors-col-5"> <ul> ... </ul> </div>