Base

Class	Description
.ui-number-input	Base class

Size

Class	Value
.ui-number-input--sm	sm
.ui-number-input--lg	lg

Block

Class	Description
.ui-number-input--block	block

Disabled

Class	Description
.ui-number-input--disabled	disabled

Override these CSS custom properties to customize the component.

Token	Default	Description
--ui-number-input-height	var(--ui-row-2)	Overall height
--ui-number-input-padding-x	var(--ui-space-1)	Horizontal padding
--ui-number-input-font-size	var(--ui-font-size-sm)	Font size
--ui-number-input-radius	var(--ui-radius-md)	Corner radius
--ui-number-input-bg	var(--ui-color-bg)	Background color
--ui-number-input-border-color	var(--ui-color-border-strong)	Border color
--ui-number-input-border-color-focus	var(--ui-color-primary)	Border color focus
--ui-number-input-text	var(--ui-color-text)	Text
--ui-number-input-button-color	var(--ui-color-text-muted)	Button color
--ui-number-input-button-bg	var(--ui-color-bg-muted)	Button bg
--ui-number-input-button-hover-bg	var(--ui-color-border)	Button hover bg
--ui-number-input-height-sm	calc(var(--ui-row) * 1.5)	Overall height at small size
--ui-number-input-font-size-sm	var(--ui-font-size-xs)	Font size at small size
--ui-number-input-height-lg	calc(var(--ui-row) * 2.5)	Overall height at large size
--ui-number-input-padding-x-lg	var(--ui-space-2)	Horizontal padding at large size
--ui-number-input-font-size-lg	var(--ui-font-size-md)	Font size at large size

<div class="ui-number-input ui-number-input--sm">
  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
    <svg viewBox="0 0 24 24">
      <path d="M5 12h14"></path>
    </svg>
  </button>
  <input class="ui-number-input__field" type="number" value="3"></input>
  <button class="ui-number-input__increment" type="button" aria-label="Increase">
    <svg viewBox="0 0 24 24">
      <path d="M12 5v14"></path>
      <path d="M5 12h14"></path>
    </svg>
  </button>
</div>
<div class="ui-number-input">
  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
    <svg viewBox="0 0 24 24">
      <path d="M5 12h14"></path>
    </svg>
  </button>
  <input class="ui-number-input__field" type="number" value="5"></input>
  <button class="ui-number-input__increment" type="button" aria-label="Increase">
    <svg viewBox="0 0 24 24">
      <path d="M12 5v14"></path>
      <path d="M5 12h14"></path>
    </svg>
  </button>
</div>
<div class="ui-number-input ui-number-input--lg">
  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
    <svg viewBox="0 0 24 24">
      <path d="M5 12h14"></path>
    </svg>
  </button>
  <input class="ui-number-input__field" type="number" value="10"></input>
  <button class="ui-number-input__increment" type="button" aria-label="Increase">
    <svg viewBox="0 0 24 24">
      <path d="M12 5v14"></path>
      <path d="M5 12h14"></path>
    </svg>
  </button>
</div>

<!-- Full-width layout. -->
<div class="ui-number-input ui-number-input--block">
  <button class="ui-number-input__decrement" type="button" aria-label="Decrease">
    <svg viewBox="0 0 24 24">
      <path d="M5 12h14"></path>
    </svg>
  </button>
  <input class="ui-number-input__field" type="number" value="5"></input>
  <button class="ui-number-input__increment" type="button" aria-label="Increase">
    <svg viewBox="0 0 24 24">
      <path d="M12 5v14"></path>
      <path d="M5 12h14"></path>
    </svg>
  </button>
</div>

<div class="ui-number-input ui-number-input--disabled">
  <button class="ui-number-input__decrement" type="button" aria-label="Decrease" disabled>
    <svg viewBox="0 0 24 24">
      <path d="M5 12h14"></path>
    </svg>
  </button>
  <input class="ui-number-input__field" type="number" value="0" disabled></input>
  <button class="ui-number-input__increment" type="button" aria-label="Increase" disabled>
    <svg viewBox="0 0 24 24">
      <path d="M12 5v14"></path>
      <path d="M5 12h14"></path>
    </svg>
  </button>
</div>