1.27.1 · master
Harbour

Components

Card Content Dialog Menu Popover Tag

Controls

Button Checkbox Drop-down menu Input Stepper Link Password Input Text Input

Layouts

Collection Form Layout Menu View Page

Variables

Icons

Input Stepper

Available states

input-stepper.is-skeleton
input-stepper.is-disabled
input-stepper.is-frozen
input-stepper.is-loading

Available modifiers

Vertical

Places the increase/decrease buttons above and below input instead of next to it

input-stepper--vertical

Secondary

Uses secondary color for the increase/decrease buttons

input-stepper--secondary

Sizes

input-stepper--90

Available local variables

$input-stepper-button-background-color

Example HTML

<div class="input-stepper">
	<input class="input-stepper__input"
		id="element-id"
		type="number"
		pattern="[0-9]*"
		autocomplete="off"
		value="7"
	>
	<button class="input-stepper__control input-stepper__control--decrease">
		-
	</button>
	<button class="input-stepper__control input-stepper__control--increase">
		+
	</button>
</div>

When I'm not surfing or sailing, I am to be found at the harbour working on my boat.

Build on 20 July 2021 12:12