Dependencies
This layout uses the following components as 'atoms' to create the full UI.
Extends: Components:Colour Picker
Enable users to select a vehicle colour by utilizing a radio button group combined with CAP color grouping.
<fieldset class="u-p-0" id="choice_colour_radio">
<span class="c-label c-label__text | u-mb-xs">
Pick one colour...
</span>
<ul class="o-grid | u-gap-sm">
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-black" type="radio" id="black" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-grey" type="radio" id="grey" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-slate" type="radio" id="slate" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-blue" type="radio" id="blue" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-indigo" type="radio" id="indigo" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-purple" type="radio" id="purple" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-pink" type="radio" id="pink" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-red" type="radio" id="red" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-orange" type="radio" id="orange" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-yellow" type="radio" id="yellow" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-beige" type="radio" id="beige" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-brown" type="radio" id="" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-green" type="radio" id="green" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-white" type="radio" id="white" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-silver" type="radio" id="silver" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-two-tone" type="radio" id="two-tone" name="vehicle_color">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--radio">
<input class="c-input c-input--radio | c-cap-multi-colour" type="radio" id="multi-colour" name="vehicle_color">
</label>
</li>
</ul>
</fieldset><fieldset class="u-p-0" id="choice_colour_checkbox">
<span class="c-label c-label__text | u-mb-xs">
Choose multiple colours ...
</span>
<ul class="o-grid | u-gap-sm">
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-black" type="checkbox" id="black_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-grey" type="checkbox" id="grey_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-slate" type="checkbox" id="slate_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-blue" type="checkbox" id="blue_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-indigo" type="checkbox" id="indigo_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-purple" type="checkbox" id="purple_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-pink" type="checkbox" id="pink_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-red" type="checkbox" id="red_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-orange" type="checkbox" id="orange_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-yellow" type="checkbox" id="yellow_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-beige" type="checkbox" id="beige_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-brown" type="checkbox" id="brown_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-green" type="checkbox" id="green_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-white" type="checkbox" id="white_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-silver" type="checkbox" id="silver_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-two-tone" type="checkbox" id="two_tone_check" name="vehicle_color_check">
</label>
</li>
<li class="o-grid__item | u-col-content u-flex">
<label class="c-label c-label--checkbox">
<input class="c-input c-input--checkbox | c-cap-multi-colour" type="checkbox" id="multi_colour_check" name="vehicle_color_check">
</label>
</li>
</ul>
</fieldset>