Stepper

Stepper Props

Name	Type	Default	Description
buttonsOnly	boolean	false	Disables inner value container between stepper buttons
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
colors.fillActiveBgIos	string	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	string	''
colors.fillBgIos	string	'bg-primary'
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'div'	Component's HTML Element
input	boolean	false	Defines should it render element or not
inputDisabled	boolean	false	Defines whether the stepper input is disabled or not
inputPlaceholder	string		Input placeholder
inputReadOnly	boolean	false	Defines whether the stepper input is read only or not
inputType	string	'text'	Input type
large	boolean	undefined	Makes stepper large. Overwrites largeIos and largeMaterial
largeIos	boolean	false	Makes stepper large in iOS theme
largeMaterial	boolean	false	Makes stepper large in Material theme
outline	boolean	undefined	Makes stepper outline. Overwrites outlineIos and outlineMaterial
outlineIos	boolean	false	Makes stepper outline in iOS theme
outlineMaterial	boolean	false	Makes stepper outline in Material theme
raised	boolean	undefined	Makes stepper raised (with shadow). Overwrites raisedIos and raisedMaterial
raisedIos	boolean	false	Makes stepper raised (with shadow) in iOS theme
raisedMaterial	boolean	false	Makes stepper raised (with shadow) in Material theme
rounded	boolean	undefined	Makes stepper round. Overwrites roundedIos and roundedMaterial
roundedIos	boolean	false	Makes stepper round in iOS theme
roundedMaterial	boolean	false	Makes stepper round in Material theme
small	boolean	undefined	Makes stepper small. Overwrites smallIos and smallMaterial
smallIos	boolean	false	Makes stepper small in iOS theme
smallMaterial	boolean	false	Makes stepper small in Material theme
touchRipple	boolean	true	Enables touch ripple effect in Material theme
value	number	0	Stepper value

Stepper Events

Name	Type	Description
blur	function(e)	Stepper input blur handler
change	function(e)	Stepper input change handler
focus	function(e)	Stepper input focus handler
input	function(e)	Stepper input input handler
minus	function(e)	Stepper "minus" button click handler
plus	function(e)	Stepper "plus" button click handler

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Stepper" />

    <i-block-title>Shape and size</i-block-title>
    <i-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <i-stepper :value="value" @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <i-stepper
            :value="value"
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <i-stepper
            :value="value"
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Rounded Outline</div>
          <i-stepper
            :value="value"
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <i-stepper :value="value" small @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <i-stepper
            :value="value"
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <i-stepper
            :value="value"
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <i-stepper
            :value="value"
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <i-stepper :value="value" large @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <i-stepper
            :value="value"
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <i-stepper
            :value="value"
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <i-stepper
            :value="value"
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </i-block>

    <i-block-title>Raised</i-block-title>
    <i-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <div class="block text-xs mb-1">Default</div>
          <i-stepper :value="value" raised @plus="increase" @minus="decrease" />
        </div>
        <div>
          <div class="block text-xs mb-1">Round</div>
          <i-stepper
            :value="value"
            raised
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Outline</div>
          <i-stepper
            :value="value"
            raised
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Round Outline</div>
          <i-stepper
            :value="value"
            raised
            outline
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small</div>
          <i-stepper
            :value="value"
            raised
            small
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Round</div>
          <i-stepper
            :value="value"
            raised
            small
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Small Outline</div>
          <i-stepper
            :value="value"
            raised
            small
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Small Rounded Outline</div>
          <i-stepper
            :value="value"
            raised
            small
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large</div>
          <i-stepper
            :value="value"
            raised
            large
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Round</div>
          <i-stepper
            :value="value"
            raised
            large
            rounded
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4 margin-top">
        <div>
          <div class="block text-xs mb-1">Large Outline</div>
          <i-stepper
            :value="value"
            raised
            large
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <div class="block text-xs mb-1">Large Rounded Outline</div>
          <i-stepper
            :value="value"
            raised
            large
            rounded
            outline
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </i-block>
    <i-block-title>With Text Input</i-block-title>
    <i-block strong-ios outline-ios class="text-center space-y-4">
      <div>
        <i-stepper
          :value="inputValue"
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
      <div>
        <i-stepper
          :value="inputValue"
          outline
          input
          @input="onInputInput"
          @blur="onInputBlur"
          @plus="increaseInput"
          @minus="decreaseInput"
        />
      </div>
    </i-block>
    <i-block-title>Only Buttons</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item :title=="`Value is ${value}`">
        <template #after>
          <i-stepper
            :value="value"
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </i-list-item>
      <i-list-item :title=="`Value is ${value}`">
        <template #after>
          <i-stepper
            :value="value"
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </i-list-item>
      <i-list-item :title=="`Value is ${value}`">
        <template #after>
          <i-stepper
            :value="value"
            raised
            outline
            buttons-only
            @plus="increase"
            @minus="decrease"
          />
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>Colors</i-block-title>
    <i-block strong-ios outline-ios class="text-center space-y-4">
      <div class="grid grid-cols-2 gap-4">
        <div>
          <i-stepper
            :value="value"
            class="k-color-brand-red"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <i-stepper
            :value="value"
            rounded
            class="k-color-brand-green"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>

      <div class="grid grid-cols-2 gap-4">
        <div>
          <i-stepper
            :value="value"
            class="k-color-brand-yellow"
            @plus="increase"
            @minus="decrease"
          />
        </div>
        <div>
          <i-stepper
            :value="value"
            rounded
            class="k-color-brand-purple"
            @plus="increase"
            @minus="decrease"
          />
        </div>
      </div>
    </i-block>
  </i-page>
</template>
<script>
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iStepper,
    iBlock,
    iBlockTitle,
    iList,
    iListItem,
  } from 'ina-ui/vue';
  import { ref } from 'vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iStepper,
      iBlock,
      iBlockTitle,
      iList,
      iListItem,
    },
    setup() {
      const value = ref(1);
      const increase = () => {
        value.value += 1;
      };
      const decrease = () => {
        value.value = value.value - 1 < 0 ? 0 : value.value - 1;
      };
      const inputValue = ref(1);
      const increaseInput = () => {
        const v = parseInt(inputValue.value, 10);
        if (isNaN(v)) inputValue.value = 0;
        else inputValue.value = v + 1;
      };
      const decreaseInput = () => {
        const v = parseInt(inputValue, 10);
        if (isNaN(v)) inputValue.value = 0;
        inputValue.value = v - 1 < 0 ? 0 : v - 1;
      };
      const onInputInput = (e) => {
        inputValue.value = parseInt(e.target.value, 10);
      };
      const onInputBlur = () => {
        if (isNaN(parseInt(inputValue.value, 10))) inputValue.value = 0;
      };

      return {
        value,
        increase,
        decrease,
        inputValue,
        increaseInput,
        decreaseInput,
        onInputInput,
        onInputBlur,
      };
    },
  };
</script>

React

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Stepper,
  Block,
  BlockTitle,
  List,
  ListItem,
} from 'ina-ui/react';

export default function StepperPage() {
  const [value, setValue] = useState(1);
  const increase = () => {
    setValue(value + 1);
  };
  const decrease = () => {
    setValue(value - 1 < 0 ? 0 : value - 1);
  };

  const [inputValue, setInputValue] = useState(1);
  const increaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) setInputValue(0);
    else setInputValue(v + 1);
  };
  const decreaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) setInputValue(0);
    setInputValue(v - 1 < 0 ? 0 : v - 1);
  };
  const onInputChange = (e) => {
    setInputValue(e.target.value);
  };
  const onInputBlur = () => {
    if (isNaN(parseInt(inputValue, 10))) setInputValue(0);
  };
  return (
    <Page>
      <Navbar
        title="Stepper"
        />

      <BlockTitle>Shape and size</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <div className="block text-xs mb-1">Default</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} />
          </div>
          <div>
            <div className="block text-xs mb-1">Round</div>
            <Stepper
              value={value}
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Outline</div>
            <Stepper
              value={value}
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Rounded Outline</div>
            <Stepper
              value={value}
              outline
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} small />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Round</div>
            <Stepper
              value={value}
              small
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small Outline</div>
            <Stepper
              value={value}
              small
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Rounded Outline</div>
            <Stepper
              value={value}
              small
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large</div>
            <Stepper value={value} onPlus={increase} onMinus={decrease} large />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Round</div>
            <Stepper
              value={value}
              large
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large Outline</div>
            <Stepper
              value={value}
              large
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Rounded Outline</div>
            <Stepper
              value={value}
              large
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>

      <BlockTitle>Raised</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <div className="block text-xs mb-1">Default</div>
            <Stepper
              value={value}
              raised
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Round</div>
            <Stepper
              value={value}
              raised
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Outline</div>
            <Stepper
              value={value}
              raised
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Round Outline</div>
            <Stepper
              value={value}
              raised
              outline
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small</div>
            <Stepper
              value={value}
              raised
              small
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Round</div>
            <Stepper
              value={value}
              raised
              small
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Small Outline</div>
            <Stepper
              value={value}
              raised
              small
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Small Rounded Outline</div>
            <Stepper
              value={value}
              raised
              small
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large</div>
            <Stepper
              value={value}
              raised
              large
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Round</div>
            <Stepper
              value={value}
              raised
              large
              rounded
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4 margin-top">
          <div>
            <div className="block text-xs mb-1">Large Outline</div>
            <Stepper
              value={value}
              raised
              large
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <div className="block text-xs mb-1">Large Rounded Outline</div>
            <Stepper
              value={value}
              raised
              large
              rounded
              outline
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>
      <BlockTitle>With Text Input</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div>
          <Stepper
            value={inputValue}
            input
            onChange={onInputChange}
            onBlur={onInputBlur}
            onPlus={increaseInput}
            onMinus={decreaseInput}
          />
        </div>
        <div>
          <Stepper
            value={inputValue}
            outline
            input
            onChange={onInputChange}
            onBlur={onInputBlur}
            onPlus={increaseInput}
            onMinus={decreaseInput}
          />
        </div>
      </Block>
      <BlockTitle>Only Buttons</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              outline
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
        <ListItem
          title={`Value is ${value}`}
          after={
            <Stepper
              value={value}
              raised
              outline
              buttonsOnly
              onPlus={increase}
              onMinus={decrease}
            />
          }
        />
      </List>

      <BlockTitle>Colors</BlockTitle>
      <Block strongIos outlineIos className="text-center space-y-4">
        <div className="grid grid-cols-2 gap-4">
          <div>
            <Stepper
              value={value}
              className="k-color-brand-red"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <Stepper
              value={value}
              rounded
              className="k-color-brand-green"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>

        <div className="grid grid-cols-2 gap-4">
          <div>
            <Stepper
              value={value}
              className="k-color-brand-yellow"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
          <div>
            <Stepper
              value={value}
              rounded
              className="k-color-brand-purple"
              onPlus={increase}
              onMinus={decrease}
            />
          </div>
        </div>
      </Block>
    </Page>
  );
}