@lion/ui/docs/components/input-stepper/overview.md

A package of extendable web components

---
title: 'Input Stepper: Overview'
parts:
  - Input Stepper
  - Overview
eleventyNavigation:
  key: 'Input Stepper: Overview'
  order: 10
  parent: Input Stepper
  title: Overview
---

# Input Stepper: Overview

A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information.

```js script
import { html } from '@mdjs/mdjs-preview';
import { loadDefaultFeedbackMessages } from '@lion/ui/validate-messages.js';
import '@lion/ui/define/lion-input-stepper.js';
loadDefaultFeedbackMessages();
```

```html preview-story
<lion-input-stepper max="5" min="0" name="count">
  <label slot="label">RSVP</label>
  <div slot="help-text">Max. 5 guests</div>
</lion-input-stepper>
```

## Features

- Based on our [input](https://github.com/ing-bank/lion/blob/b7d7ffac177a6f66a52281c47d969558fa66edf8/docs/components/input/overview.md).
- Set `min` and `max` value to define the range.
- Set `step` value in integer or decimal to increase and decrease the value.
- Use `ArrowUp` or `ArrowDown` to update the value.

## Installation

```bash
npm i --save @lion/ui
```

```js
import { LionInputStepper } from '@lion/ui/input-stepper.js';
// or
import '@lion/ui/define/lion-input-stepper.js';
```