> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/36.stepper.md).

# Stepper

### Stepper Props <a href="#stepper-props" id="stepper-props"></a>

| 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

{% tabs %}
{% tab title="Vue" %}

```typescript
<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>
```

{% endtab %}

{% tab title="React" %}

```js
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>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/36.stepper.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.