`,
+ ' ',
+ ` `,
+ ' ',
+ '
',
+ ].join('')
+
+describe('NumberInput', () => {
+ let fixtureEl: HTMLElement
+
+ beforeAll(() => {
+ fixtureEl = getFixture()
+ })
+
+ beforeEach(() => {
+ fixtureEl.innerHTML = markup()
+ })
+
+ afterEach(() => {
+ clearFixture()
+ vi.useRealTimers()
+ })
+
+ const numberInput = (): HTMLElement => fixtureEl.querySelector('.number-input')!
+ const input = (): HTMLInputElement => fixtureEl.querySelector('input')!
+ const decrementButton = (): HTMLButtonElement => fixtureEl.querySelector('[data-bs-number-input-action="decrement"]')!
+ const incrementButton = (): HTMLButtonElement => fixtureEl.querySelector('[data-bs-number-input-action="increment"]')!
+
+ const change = (value: string): void => {
+ input().value = value
+ input().dispatchEvent(new Event('change', { bubbles: true }))
+ }
+
+ const keydown = (key: string): KeyboardEvent => {
+ const event = new KeyboardEvent('keydown', { key, bubbles: true, cancelable: true })
+ input().dispatchEvent(event)
+ return event
+ }
+
+ describe('NAME', () => {
+ it('should return the plugin name', () => {
+ expect(NumberInput.NAME).toBe('numberInput')
+ })
+ })
+
+ describe('Default', () => {
+ it('should expose the default config', () => {
+ expect(NumberInput.Default.min).toBeNull()
+ expect(NumberInput.Default.repeat).toBe(true)
+ expect(typeof NumberInput.DefaultType.step).toBe('string')
+ })
+ })
+
+ describe('constructor', () => {
+ it('should read the bounds from the input attributes', () => {
+ const instance = new NumberInput(numberInput())
+ expect(instance._min).toBe(0)
+ expect(instance._max).toBe(5)
+ expect(instance._step).toBe(1)
+ })
+
+ it('should let the config override the input attributes', () => {
+ const instance = new NumberInput(numberInput(), { min: 2, max: 10, step: 2 })
+ expect(instance._min).toBe(2)
+ expect(instance._max).toBe(10)
+ expect(instance._step).toBe(2)
+ expect(input().value).toBe('2')
+ })
+
+ it('should read the config from data attributes', () => {
+ fixtureEl.innerHTML = markup('value="1"', 'data-bs-min="1" data-bs-max="3" data-bs-step="0.5"')
+ const instance = new NumberInput(numberInput())
+ expect(instance._min).toBe(1)
+ expect(instance._max).toBe(3)
+ expect(instance._step).toBe(0.5)
+ })
+
+ it('should have no bounds when neither attributes nor config set them', () => {
+ fixtureEl.innerHTML = markup('value="1"')
+ const instance = new NumberInput(numberInput())
+ expect(instance._min).toBe(Number.NEGATIVE_INFINITY)
+ expect(instance._max).toBe(Number.POSITIVE_INFINITY)
+ })
+
+ it('should fall back to a step of 1 for a zero or negative step', () => {
+ fixtureEl.innerHTML = markup('value="1" step="0"')
+ expect(new NumberInput(numberInput())._step).toBe(1)
+ })
+
+ it('should clamp the initial value', () => {
+ fixtureEl.innerHTML = markup('value="9" min="0" max="5"')
+ new NumberInput(numberInput())
+ expect(input().value).toBe('5')
+ })
+
+ it('should give a text input the spinbutton role and a numeric inputmode', () => {
+ new NumberInput(numberInput())
+ expect(input().getAttribute('role')).toBe('spinbutton')
+ expect(input().getAttribute('inputmode')).toBe('numeric')
+ expect(input().getAttribute('aria-valuemin')).toBe('0')
+ expect(input().getAttribute('aria-valuemax')).toBe('5')
+ expect(input().getAttribute('aria-valuenow')).toBe('1')
+ })
+
+ it('should use the decimal inputmode for a fractional step', () => {
+ fixtureEl.innerHTML = markup('value="1" step="0.25"')
+ new NumberInput(numberInput())
+ expect(input().getAttribute('inputmode')).toBe('decimal')
+ })
+
+ it('should leave a number input alone', () => {
+ fixtureEl.innerHTML = markup('type="number" value="1" min="0" max="5"').replace('type="text"', '')
+ new NumberInput(numberInput())
+ expect(input().hasAttribute('role')).toBe(false)
+ expect(input().hasAttribute('aria-valuenow')).toBe(false)
+ })
+
+ it('should do nothing without an input', () => {
+ fixtureEl.innerHTML = ''
+ const instance = new NumberInput(numberInput())
+ expect(instance._input).toBeNull()
+ expect(instance.getValue()).toBeNull()
+ })
+
+ it('should disable the buttons of a disabled input', () => {
+ fixtureEl.innerHTML = markup('value="1" disabled')
+ new NumberInput(numberInput())
+ expect(decrementButton().disabled).toBe(true)
+ expect(incrementButton().disabled).toBe(true)
+ })
+ })
+
+ describe('buttons', () => {
+ it('should step the value on click', () => {
+ new NumberInput(numberInput())
+ incrementButton().click()
+ expect(input().value).toBe('2')
+ decrementButton().click()
+ decrementButton().click()
+ expect(input().value).toBe('0')
+ })
+
+ it('should disable the button at a bound', () => {
+ fixtureEl.innerHTML = markup('value="4" min="0" max="5"')
+ new NumberInput(numberInput())
+ expect(incrementButton().disabled).toBe(false)
+ incrementButton().click()
+ expect(input().value).toBe('5')
+ expect(incrementButton().disabled).toBe(true)
+ expect(decrementButton().disabled).toBe(false)
+ })
+
+ it('should never leave the bounds', () => {
+ const instance = new NumberInput(numberInput(), { max: 2 })
+ instance.increment()
+ instance.increment()
+ instance.increment()
+ expect(input().value).toBe('2')
+ })
+
+ it('should keep stepping while a button is held', () => {
+ vi.useFakeTimers()
+ new NumberInput(numberInput(), { max: 100 })
+
+ incrementButton().dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }))
+ vi.advanceTimersByTime(400)
+ expect(input().value).toBe('2')
+ vi.advanceTimersByTime(80 * 3)
+ expect(input().value).toBe('5')
+
+ incrementButton().dispatchEvent(new PointerEvent('pointerup', { bubbles: true }))
+ vi.advanceTimersByTime(1000)
+ expect(input().value).toBe('5')
+
+ // The click that ends the hold is not one more step
+ incrementButton().click()
+ expect(input().value).toBe('5')
+ })
+
+ it('should stop a hold at a bound', () => {
+ vi.useFakeTimers()
+ const instance = new NumberInput(numberInput(), { max: 3 })
+
+ incrementButton().dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }))
+ vi.advanceTimersByTime(400 + 80 * 5)
+ expect(input().value).toBe('3')
+ expect(instance._repeatTimer).toBeNull()
+ })
+
+ it('should not repeat when the option is off', () => {
+ vi.useFakeTimers()
+ new NumberInput(numberInput(), { repeat: false, max: 100 })
+
+ incrementButton().dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, pointerType: 'mouse' }))
+ vi.advanceTimersByTime(2000)
+ expect(input().value).toBe('1')
+ })
+ })
+
+ describe('keyboard', () => {
+ it('should step with the arrow keys and jump with Home and End', () => {
+ new NumberInput(numberInput())
+ expect(keydown('ArrowUp').defaultPrevented).toBe(true)
+ expect(input().value).toBe('2')
+ keydown('ArrowDown')
+ expect(input().value).toBe('1')
+ keydown('End')
+ expect(input().value).toBe('5')
+ keydown('Home')
+ expect(input().value).toBe('0')
+ })
+
+ it('should ignore Home and End without a bound', () => {
+ fixtureEl.innerHTML = markup('value="1"')
+ new NumberInput(numberInput())
+ expect(keydown('End').defaultPrevented).toBe(false)
+ expect(input().value).toBe('1')
+ })
+
+ it('should leave other keys alone', () => {
+ new NumberInput(numberInput())
+ expect(keydown('a').defaultPrevented).toBe(false)
+ })
+ })
+
+ describe('typed value', () => {
+ it('should clamp a typed value on change', () => {
+ new NumberInput(numberInput())
+ change('42')
+ expect(input().value).toBe('5')
+ expect(incrementButton().disabled).toBe(true)
+ })
+
+ it('should clamp on blur as well', () => {
+ new NumberInput(numberInput())
+ input().value = '125'
+ input().dispatchEvent(new Event('blur'))
+ expect(input().value).toBe('5')
+ })
+
+ it('should fire nothing when an untouched field is left', () => {
+ new NumberInput(numberInput())
+ const spy = vi.fn()
+ input().addEventListener('change', spy)
+ input().dispatchEvent(new Event('blur'))
+ expect(spy).not.toHaveBeenCalled()
+ })
+
+ it('should restore the previous value after a non-numeric edit', () => {
+ new NumberInput(numberInput())
+ change('3')
+ change('abc')
+ expect(input().value).toBe('3')
+ })
+
+ it('should accept a decimal comma', () => {
+ fixtureEl.innerHTML = markup('value="1" step="0.5"')
+ new NumberInput(numberInput())
+ change('2,5')
+ expect(input().value).toBe('2.5')
+ })
+ })
+
+ describe('character filter', () => {
+ const beforeInput = (data: string, inputType = 'insertText'): InputEvent => {
+ const event = new InputEvent('beforeinput', { data, inputType, bubbles: true, cancelable: true })
+ input().dispatchEvent(event)
+ return event
+ }
+
+ it('should drop a typed letter and keep a digit', () => {
+ new NumberInput(numberInput())
+ expect(beforeInput('a').defaultPrevented).toBe(true)
+ expect(beforeInput('7').defaultPrevented).toBe(false)
+ expect(beforeInput('.').defaultPrevented).toBe(true)
+ expect(beforeInput('-').defaultPrevented).toBe(true)
+ })
+
+ it('should allow the sign and the separator when the bounds and step need them', () => {
+ fixtureEl.innerHTML = markup('value="0" min="-5" step="0.5"')
+ new NumberInput(numberInput())
+ expect(beforeInput('-').defaultPrevented).toBe(false)
+ expect(beforeInput('.').defaultPrevented).toBe(false)
+ expect(beforeInput(',').defaultPrevented).toBe(false)
+ expect(beforeInput('e').defaultPrevented).toBe(true)
+ })
+
+ it('should keep only the digits of a pasted text', () => {
+ new NumberInput(numberInput())
+ input().value = ''
+ input().setSelectionRange(0, 0)
+ expect(beforeInput('4 pcs', 'insertFromPaste').defaultPrevented).toBe(true)
+ expect(input().value).toBe('4')
+ })
+
+ it('should leave deletions alone', () => {
+ new NumberInput(numberInput())
+ expect(beforeInput('', 'deleteContentBackward').defaultPrevented).toBe(false)
+ })
+ })
+
+ describe('precision', () => {
+ it('should round to the precision of the step', () => {
+ fixtureEl.innerHTML = markup('value="0.1" step="0.1"')
+ const instance = new NumberInput(numberInput())
+ instance.increment()
+ instance.increment()
+ expect(input().value).toBe('0.3')
+ expect(instance.getValue()).toBe(0.3)
+ })
+
+ it('should step an empty field from the lower bound', () => {
+ fixtureEl.innerHTML = markup('value="" min="2" max="9"')
+ const instance = new NumberInput(numberInput())
+ expect(instance.getValue()).toBeNull()
+ expect(input().hasAttribute('aria-valuenow')).toBe(false)
+ instance.increment()
+ expect(input().value).toBe('3')
+ })
+ })
+
+ describe('events', () => {
+ it('should fire change.bs.numberInput with the values', () => {
+ const instance = new NumberInput(numberInput())
+ const spy = vi.fn()
+ numberInput().addEventListener('change.bs.numberInput', spy)
+
+ instance.increment()
+ expect(spy).toHaveBeenCalledTimes(1)
+ const event = spy.mock.calls[0][0] as Event & { value: number; previousValue: number }
+ expect(event.value).toBe(2)
+ expect(event.previousValue).toBe(1)
+ })
+
+ it('should fire input and change on the field', () => {
+ const instance = new NumberInput(numberInput())
+ const onInput = vi.fn()
+ const onChange = vi.fn()
+ input().addEventListener('input', onInput)
+ input().addEventListener('change', onChange)
+
+ instance.increment()
+ expect(onInput).toHaveBeenCalledTimes(1)
+ expect(onChange).toHaveBeenCalledTimes(1)
+ })
+
+ it('should not fire when the value does not change', () => {
+ const instance = new NumberInput(numberInput())
+ const spy = vi.fn()
+ numberInput().addEventListener('change.bs.numberInput', spy)
+
+ instance.setValue(1)
+ instance.decrement()
+ instance.decrement()
+ expect(spy).toHaveBeenCalledTimes(1)
+ })
+ })
+
+ describe('setValue', () => {
+ it('should set and clamp the value', () => {
+ const instance = new NumberInput(numberInput())
+ instance.setValue(3)
+ expect(input().value).toBe('3')
+ instance.setValue('99')
+ expect(input().value).toBe('5')
+ instance.setValue('nope')
+ expect(input().value).toBe('5')
+ })
+ })
+
+ describe('disabled', () => {
+ it('should not step a disabled or readonly input', () => {
+ fixtureEl.innerHTML = markup('value="1" readonly')
+ const instance = new NumberInput(numberInput())
+ instance.increment()
+ expect(input().value).toBe('1')
+ expect(incrementButton().disabled).toBe(true)
+ })
+ })
+
+ describe('dispose', () => {
+ it('should remove the listeners and the instance', () => {
+ const instance = new NumberInput(numberInput())
+ instance.dispose()
+ incrementButton().click()
+ expect(input().value).toBe('1')
+ expect(NumberInput.getInstance(numberInput())).toBeNull()
+ })
+ })
+
+ describe('bare input', () => {
+ const bare = (attributes = 'value="1" min="0" max="5"'): HTMLInputElement => {
+ fixtureEl.innerHTML = ``
+ return fixtureEl.querySelector('input')!
+ }
+
+ it('should wrap the input and render the two buttons', () => {
+ const el = bare()
+ new NumberInput(el)
+
+ const wrapper = el.parentElement!
+ expect(wrapper.classList.contains('number-input')).toBe(true)
+ expect(wrapper.parentElement!.tagName).toBe('FORM')
+ expect([...wrapper.children].map((child) => child.tagName)).toEqual(['BUTTON', 'INPUT', 'BUTTON'])
+ expect(decrementButton().getAttribute('aria-label')).toBe('Decrease')
+ expect(incrementButton().getAttribute('aria-label')).toBe('Increase')
+ expect(incrementButton().type).toBe('button')
+ expect(incrementButton().innerHTML).toBe('')
+ })
+
+ it('should step through the rendered buttons', () => {
+ const el = bare()
+ new NumberInput(el)
+ incrementButton().click()
+ expect(el.value).toBe('2')
+ })
+
+ it('should read the config from the input and label the buttons', () => {
+ const el = bare('value="1" data-bs-max="2" data-bs-increment-label="More" data-bs-decrement-label="Fewer"')
+ new NumberInput(el)
+ expect(incrementButton().getAttribute('aria-label')).toBe('More')
+ expect(decrementButton().getAttribute('aria-label')).toBe('Fewer')
+ incrementButton().click()
+ incrementButton().click()
+ expect(el.value).toBe('2')
+ })
+
+ it('should map the size of the input to the box', () => {
+ fixtureEl.innerHTML = ''
+ const el = fixtureEl.querySelector('input')!
+ new NumberInput(el)
+ expect(el.parentElement!.classList.contains('number-input-sm')).toBe(true)
+ })
+
+ it('should fire change.bs.numberInput on the input', () => {
+ const el = bare()
+ const instance = new NumberInput(el)
+ const spy = vi.fn()
+ el.addEventListener('change.bs.numberInput', spy)
+ instance.increment()
+ expect(spy).toHaveBeenCalledTimes(1)
+ })
+
+ it('should unwrap the input on dispose', () => {
+ const el = bare()
+ new NumberInput(el).dispose()
+ expect(el.parentElement!.tagName).toBe('FORM')
+ expect(fixtureEl.querySelector('.number-input')).toBeNull()
+ expect(fixtureEl.querySelectorAll('button')).toHaveLength(0)
+ })
+ })
+
+ describe('data-api', () => {
+ it('should initialise on getOrCreateInstance', () => {
+ const instance = NumberInput.getOrCreateInstance(numberInput())
+ expect(instance).toBeInstanceOf(NumberInput)
+ expect(NumberInput.getOrCreateInstance(numberInput())).toBe(instance)
+ })
+
+ it('should accept the data-tblr-* action attributes', () => {
+ fixtureEl.innerHTML = markup().replaceAll('data-bs-number-input-action', 'data-tblr-number-input-action')
+ new NumberInput(numberInput())
+ fixtureEl.querySelector| Flag | -Name | -Country code | -CSS class | -
|---|---|---|---|
| - - | -{flag.name} | -
- {flag.flag}
- |
-
- .flag-country-{flag.flag}
- |
-
{category}
+| Flag | +Name | +Code | +CSS class | +
|---|---|---|---|
| + + | +{flag.name} | +
+ {flag.flag}
+ |
+
+ .flag-country-{flag.flag}
+ |
+
-
+
-
+
+
+
+```
+
+### Route
+
+Draw a path with `data-bs-route`: a list of `[longitude, latitude]` points. The line takes the primary color and is drawn again after a theme change. Mark its ends with markers.
+
+```html
+
+
+
+
+
+
+
+
+```
+
+To show how far along a path something is, add `data-bs-route-progress` with the index of the point reached so far, counted from 0. The path up to that point stays solid and the rest is dashed.
+
+```html
+
+```
+
+### Areas and other shapes
+
+`data-bs-geojson` draws [GeoJSON](https://geojson.org/) over the map: areas with a light fill and an outline, lines, and points as small circles. Pass the GeoJSON itself, or the URL of a file.
+
+```html
+
+```
+
+Both use the primary color. Set `data-bs-layer-color` to another color, for example `--tblr-red` or `#d63939`.
+
+### Globe
+
+Add `data-bs-globe="true"` to draw the map as a 3D globe. Use a low zoom, between 1 and 2, to see the whole globe. People can turn it by dragging.
+
+```html
+
+```
+
+### Content over the map
+
+To put buttons or a small card over the map, place them next to the map element and position them with the utility classes:
+
+```html
+
+
+```
+
+### Attribution
+
+MapLibre adds the credit for the map data in the corner of the map. OpenFreeMap requires it, so do not hide it.
+
+## Layers
+
+The route and GeoJSON options cover simple shapes. For anything more, such as clusters, dashed lines or circles sized by a value, take the MapLibre map from the component and use its own API. The `map` property is the [MapLibre map](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/).
+
+A layer reads its data from a GeoJSON source. Layers are part of the map style, so add them in `onStyle()`. It runs when the style has loaded, and again each time the style changes, for example on a theme change.
```js
document.addEventListener('DOMContentLoaded', function () {
- mapboxgl.accessToken = 'pk.your-token-here'
+ const view = tabler.MapView.getInstance('#map-stores')
- const map = new mapboxgl.Map({
- container: 'map-simple',
- style: 'mapbox://styles/mapbox/streets-v11',
- zoom: 13,
- center: [13.4049, 52.518827],
+ view.onStyle(function (map) {
+ map.addSource('stores', { type: 'geojson', data: stores })
+ map.addLayer({
+ id: 'stores',
+ type: 'circle',
+ source: 'stores',
+ paint: { 'circle-color': tabler.MapView.color('--tblr-primary'), 'circle-radius': 6 },
+ })
+ })
+
+ // Runs once the map exists: the library may load a moment after the page
+ view.ready(function (map) {
+ map.on('click', 'stores', function (event) {
+ console.log(event.features[0].properties)
+ })
})
})
```
-`center` takes the longitude first and the latitude second. This is the Mapbox order, and it is the opposite of what most map services show.
+For an area, use a `Polygon` geometry with a `fill` layer, and a `line` layer for its outline.
-### Map styles
+### Theme colors in layers
-Set `style` to any Mapbox style URL. These three are used in the Tabler demos:
-
-| Style | Result |
-| --- | --- |
-| `mapbox://styles/mapbox/streets-v11` | Default street map. |
-| `mapbox://styles/mapbox/light-v10` | Light map, good under charts and markers. |
-| `mapbox://styles/mapbox/satellite-v9` | Satellite photos. |
-
-### Markers
-
-Add a marker for each place. `setLngLat` takes the same longitude and latitude order as `center`.
+MapLibre draws layers on a canvas, so a CSS variable does not work in `paint`, and neither do the `oklch()` values Tabler colors are written in. `MapView.color()` turns a variable, or any CSS color, into a plain `rgb()` color. Call it inside `onStyle()`, so the colors are read again after a theme change.
```js
-const cities = [
- [-58.666667, -34.58333333], // Buenos Aires
- [16.366667, 48.2], // Vienna
- [116.383333, 39.91666667], // Beijing
-]
+tabler.MapView.color('--tblr-primary') // 'rgb(6, 111, 209)'
+```
-cities.forEach(function (coords) {
- new mapboxgl.Marker({ color: 'var(--tblr-primary)' }).setLngLat(coords).addTo(map)
+### Clusters
+
+Put many points in a GeoJSON source with `cluster: true`. MapLibre then groups nearby points and splits the groups as you zoom in.
+
+```js
+map.addSource('stores', { type: 'geojson', data: stores, cluster: true, clusterRadius: 40 })
+
+// Circle for each cluster, larger for more points
+map.addLayer({
+ id: 'clusters',
+ type: 'circle',
+ source: 'stores',
+ filter: ['has', 'point_count'],
+ paint: { 'circle-color': tabler.MapView.color('--tblr-primary'), 'circle-radius': ['step', ['get', 'point_count'], 14, 10, 18, 25, 24] },
+})
+
+// Number of points in the cluster
+map.addLayer({
+ id: 'cluster-count',
+ type: 'symbol',
+ source: 'stores',
+ filter: ['has', 'point_count'],
+ layout: { 'text-field': ['get', 'point_count_abbreviated'], 'text-font': ['Noto Sans Regular'], 'text-size': 12 },
+ paint: { 'text-color': '#ffffff' },
})
```
-The `color` option is written to the `fill` attribute of the marker icon. A CSS variable works there, so `var(--tblr-primary)` keeps the markers in your theme color, including after a theme change.
+`text-font` has to be a font the map style provides. All OpenFreeMap styles have `Noto Sans Regular`.
-## Examples
+### Tooltips
-### Map in a card
+For a short label on hover, add the `map-tooltip` class to a MapLibre popup. It turns the popup into a small dark label.
-Add a card title above the map. This is the usual layout for a small map next to other content.
+```js
+const tooltip = new maplibregl.Popup({ closeButton: false, offset: 12, className: 'map-tooltip' })
-
+
+
+
+
+
+
+
-
-
-
-Simple map
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Create an account
+
+
+
+
+
+
+
+
+
+ 
+
+
+
- ctrl + K
+ ⌘K
diff --git a/docs/content/ui/forms/number-input.mdx b/docs/content/ui/forms/number-input.mdx
new file mode 100644
index 000000000..02f9b0c95
--- /dev/null
+++ b/docs/content/ui/forms/number-input.mdx
@@ -0,0 +1,180 @@
+---
+title: Number input
+seoTitle: Number input (quantity stepper)
+order: 14
+summary: A number field with a decrease and an increase button, for a quantity in a cart, a number of seats or any value changed in fixed steps.
+description: Add a number input with min, max and step, hold-to-repeat buttons, arrow key support and change events.
+added-in: '1.7.0'
+related: [/ui/forms/elements, /ui/forms/validation]
+source: core/scss/ui/forms/_form-number-input.scss
+css-vars: number-input
+classnames:
+ component:
+ - class: number-input
+ desc: The box around the field and the two buttons; rendered by the plugin, or written by hand for custom buttons
+ size:
+ - class: number-input-sm
+ desc: Smaller field and buttons
+ - class: number-input-lg
+ desc: Larger field and buttons
+---
+
+import Example from '@components/Example.astro'
+import CodeDocs from '@components/CodeDocs.astro'
+import Icon from '@ui/Icon.astro'
+
+## Overview
+
+A number input is an ordinary `` between two buttons. The input stays the only field a form sees: the buttons, the arrow keys and the JavaScript API all write to it, keep the value between `min` and `max` and round it to the precision of `step`.
+
+Add `data-bs-toggle="number-input"` to the input and Tabler does the rest: it wraps the field in a `.number-input` box and renders the two buttons. The bounds come from the input's own `min`, `max` and `step` attributes.
+
+
+
+
+
+
+
+
+
+
+ In stock, ships today.
+
+
+
+Only 5 pieces left.
+
+
+
+
+
+