Tick (check boxes and radio buttons)

.Tick

The Tick component is used to give enhanced style to the standard input radio buttons and check boxes.

The original checkbox or radio input element should be wrapped in a label with the Tick class, and should be given the class Tick-input.

Check boxes should have an additional element with the Tick-checkbox class.

Similarly radio buttons should have an additional element with the Tick-radio class.

The Tick-checkbox and Tick-radio sub-components are the ones giving the tickable component its new style, while Tick-input hides the original input element.

Example

Markup

<p>
    <label class="Tick">
        <input class="Tick-input Formrow-input" id="opt11" type="radio" name="radio_set_1" checked>
        <span class="Tick-radio"></span>
        Option one
    </label>
</p>
<p>
    <label class="Tick">
        <input class="Tick-input Formrow-input" id="opt12" type="radio" name="radio_set_1">
        <span class="Tick-radio"></span>
        Option two
    </label>
</p>
<p>
    <label class="Tick">
        <input class="Tick-input Formrow-input" id="opt13" type="checkbox" name="checkbox_1">
        <span class="Tick-checkbox"></span>
        Checkbox
    </label>
</p>