ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/docs/components/input-stepper/overview.md
Pavlik Kiselev 11bbc5fff5
feat: migrated the navigation metadata from inline MD title decorations to frontmatter 
* feat: migrated the navigation metadata from inline MD title decorations to frontmatter

* fix: fixed frontmatter metadate for api-table MDs

* fix: fixed frontmatter eslint issue
2025-03-19 10:08:22 +01:00

1.2 KiB
Raw Blame History

parts title eleventyNavigation
Input Stepper
Overview
Input Stepper: Overview
key order parent title
Input Stepper: Overview 10 Input Stepper 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.

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

<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.
  • 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

npm i --save @lion/ui

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