BuNumberField

A number field Bulma never documented, built entirely from parts it did: stepper buttons attached to an input, with stepping, bounds, formatting and validation supplied by Vuetify0.

Usage

v-model holds the value — a number, or null while the field is empty. min, max and step bound it, and each stepper goes inert the moment the value reaches its bound. Compose the three parts in order: decrement, input, increment.

Give the input the leftover width with expanded. Without it the input sizes to its content and the group collapses to the width of a short number.

<script setup lang="ts">
  import {
    BuField,
    BuHelp,
    BuLabel,
    BuNumberField,
    BuNumberFieldDecrement,
    BuNumberFieldIncrement,
    BuNumberFieldInput,
  } from '@paper/bulma'

  import { shallowRef } from 'vue'

  const quantity = shallowRef<number | null>(1)
</script>

<template>
  <BuField>
    <BuLabel for="quantity">Quantity</BuLabel>

    <BuNumberField
      id="quantity"
      v-model="quantity"
      :max="10"
      :min="0"
      :step="1"
    >
      <BuNumberFieldDecrement />
      <BuNumberFieldInput expanded />
      <BuNumberFieldIncrement />
    </BuNumberField>

    <BuHelp>Value: {{ quantity }} — the steppers go inert at 0 and 10.</BuHelp>
  </BuField>
</template>

Anatomy

<script setup lang="ts">
  import {
    BuNumberField,
    BuNumberFieldDecrement,
    BuNumberFieldIncrement,
    BuNumberFieldInput,
  } from '@paper/bulma'
</script>

<template>
  <BuNumberField>
    <BuNumberFieldDecrement />

    <BuNumberFieldInput />

    <BuNumberFieldIncrement />
  </BuNumberField>
</template>

Composed on v0

Composes v0’s NumberField. BuNumberField creates a NumberField.Root unless an ambient one already exists; Decrement, Control, and Increment live inside each part’s own .control.

v0 owns the spinbutton: the math, the bounds, formatting, validation, keyboard, hold-to-repeat. Bulma owns .field.has-addons radii — each part wraps .control because first- and last-child selectors are how the group gets its corners.

An ambient NumberField.Root swallows every behavioral prop on BuNumberField — v-model, bounds, format, validation. Only presentational modifiers still apply. Point BuLabel and BuHelp at namespace="v0:number-field:root" or they inject nothing.

The markup it composes

Bulma ships no number input. There is no upstream component page to copy from, so this one is composed out of things Bulma does document: the attached-controls layout↗︎ — .field.has-addons wrapping one .control per item — with button.button steppers on either side of an input.input. No class in it is invented, and the package ships no CSS.

That changes what conformance can promise here, and the change is declared rather than glossed. Every other component in the package is diffed against markup captured verbatim from bulma.io. This one is diffed against a fixture the package authored itself, whose provenance header traces each class back to another fixture block or to a bulma.css selector — so every atom is upstream-verified and only the arrangement is ours. The arrangement is pinned the moment that fixture is written, so drift still fails the suite loudly. What the suite cannot claim is that upstream would have arranged the atoms the same way.

<div class="field has-addons">
  <div class="control">
    <button class="button" type="button">&minus;</button>
  </div>
  <div class="control is-expanded">
    <input class="input" type="text" inputmode="decimal" role="spinbutton" />
  </div>
  <div class="control">
    <button class="button" type="button">+</button>
  </div>
</div>

<template>
  <BuNumberField v-model="quantity" :max="10" :min="0">
    <BuNumberFieldDecrement />

    <BuNumberFieldInput expanded />

    <BuNumberFieldIncrement />
  </BuNumberField>
</template>

Each part renders its own .control wrapper rather than leaving it to you, because that wrapper is structural: Bulma keys the group’s corner radii off the first and last .control, and squares off the ones between. A bare stepper dropped in as a sibling would get no radius treatment and visibly break the group, so the composition is not something userland has to get right.

Examples

Props

BuNumberField renders .field.has-addons and owns the value, the bounds and the modifiers. Everything else is a part.

Each part takes a namespace prop as an escape hatch, but the parent’s namespace wins whenever they are composed inside a BuNumberField.

Accessibility

The input is the widget. It carries role="spinbutton" and inputmode="decimal", and the full aria-value* set follows the value: aria-valuenow and aria-valuetext while a value exists, plus aria-valuemin and aria-valuemax whenever the corresponding bound is finite. On an empty field aria-valuenow and aria-valuetext are omitted rather than faked — there is no number to report.

The steppers are deliberately not focusable. Both carry tabindex="-1" and a localized aria-label, which is the ARIA Authoring Practices spinbutton pattern: keyboard users operate the field through the input, and the buttons exist for pointer input. That leaves one tab stop per field instead of three.

Holding a stepper repeats it — after spin-delay, at spin-rate. The release is caught on the document, so dragging off the button before letting go still stops the spin.