Tickster Styleguide

Appearance

Plus-minus ​

When to use it ​

The Plus-minus component relies heavily on the Form control and Button components. The only unique CSS part here is the added c-plus-minus class, added to the c-form-control element.

Then, there's some added interactivity using JS, enabled by adding data-plus-minus to the component element, that makes the buttons increase or decrease the input in the middle. The "boundaries" or "rules" for this interaction is determined solely by using the native min, max and step attributes of the input field.

The interativity mentioned above requires the file components.plus-minus.js but fear not – it's built right into the framework JS file.

Variants ​

The Plus-minus component can be customized with different button styles and sizes, e.g. c-button--small classes on the buttons make the whole component slightly smaller.

What it looks like ​

Code examples ​

html
<div class="c-plus-minus c-form-control" data-plus-minus>
    <label for="id33" class="u-hidden--visually">Enter amount</label>
    <button type="button" class="c-button c-button--negative" title="Decrease by 1">-</button>
    <input class="c-plus-minus__amount" id="id33" type="number" min="-10" max="10" value="0" />
    <button type="button" class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
html
<div class="c-plus-minus c-form-control" data-plus-minus>
    <label for="id34" class="u-hidden--visually">Enter amount</label>
    <button type="button" class="c-button c-button--negative" title="Decrease by 1">-</button>
    <input class="c-plus-minus__amount" id="id34" type="number" min="1" max="5" value="5" />
    <button type="button" class="c-button c-button--positive" title="Increase by 1">+</button>
</div>
html
<div class="c-plus-minus c-form-control" data-plus-minus>
    <label for="id35" class="u-hidden--visually">Enter amount</label>
    <button type="button" class="c-button c-button--negative" title="Decrease by 2">-</button>
    <input class="c-plus-minus__amount" id="id35" type="number" min="2" step="2" max="10" value="2" />
    <button type="button" class="c-button c-button--positive" title="Increase by 2">+</button>
</div>
html
<div class="c-plus-minus c-form-control" data-plus-minus>
    <label for="id36" class="u-hidden--visually">Enter amount (can be zero)</label>
    <button type="button" class="c-button c-button--small c-button--negative" title="Decrease by 2">-</button>
    <input class="c-plus-minus__amount" id="id36" type="number" min="0" step="2" max="20" value="4" />
    <button type="button" class="c-button c-button--small c-button--positive" title="Increase by 2">+</button>
</div>

Accessibility notes ​

This component should handle keyboard input quite well. When using arrow keys, pasting values, entering bad values etc, the input field should accomodate and correct in the same way as when clicking the buttons. Make sure to use the elements mentioned in the examples though, since this component relies on the built-in focus/blur/change events bound to these elements.