Number Field

A numeric input with increment and decrement buttons, and a scrub area. Drag the label sideways to scrub the value. The field and steppers have no border. They rest on the color wash and shift lightness on hover and focus. Outer corners are rounded and the inner edges stay square. The number is Light and the scrub label is Regular.

Anatomy

<UiNumberFieldRoot :default-value="100">
  <UiNumberFieldScrubArea>
    <label>Amount</label>
    <UiNumberFieldScrubAreaCursor />
  </UiNumberFieldScrubArea>
  <UiNumberFieldGroup>
    <UiNumberFieldDecrement />
    <UiNumberFieldInput />
    <UiNumberFieldIncrement />
  </UiNumberFieldGroup>
</UiNumberFieldRoot>

Parts

  • Root — value / defaultValue, min, max, step, disabled.
  • ScrubArea — pointer drag changes the value. ew-resize cursor.
  • ScrubAreaCursor — follows the pointer while scrubbing.
  • Group — lays out decrement, input, increment.
  • Decrement / Increment — step the value. Arrow up/down on the input do the same.
  • Input — text field with inputmode="decimal". Blur clamps to min/max.