Forms

Stable - @kikita-labs/ui v1.6.1

Number Input

kuiNumberInput applies Kikita UI number-input styling and increment/decrement controls to a native input[type=number] element.

Import

Import the public number input directive from the package entrypoint.

number-input.ts
import { KuiNumberInputDirective } from '@kikita-labs/ui';

Usage

Open in Playground

Use kuiNumberInput on a native input[type=number] element. Standard HTML attributes such as min, max, step, disabled, readonly, and value are placed directly on the input.

<input type="number" kuiNumberInput min="0" max="100" aria-label="Quantity" value="4" />
<input
  type="number"
  kuiNumberInput
  size="sm"
  min="0"
  max="10"
  aria-label="Small quantity"
  value="2"
/>
<input
  type="number"
  kuiNumberInput
  disabled
  min="0"
  max="10"
  aria-label="Disabled quantity"
  value="3"
/>

Compact variant

variant b, with minus/plus controls on the sides, is the default and recommended for most use cases. variant a stacks compact arrow controls on the right.

<input
  type="number"
  kuiNumberInput
  variant="a"
  min="0"
  max="99"
  aria-label="Compact quantity"
  value="12"
/>
<input
  type="number"
  kuiNumberInput
  variant="b"
  min="0"
  max="99"
  aria-label="Default quantity"
  value="12"
/>

Min, max, step, and invalid

Click a generated button to step by the step attribute, or by 1 when step is omitted. At min the decrement button disables; at max the increment button disables. invalid applies an error border.

<input
  type="number"
  kuiNumberInput
  min="0"
  max="20"
  step="5"
  aria-label="Step of five"
  value="10"
/>
<input
  type="number"
  kuiNumberInput
  invalid
  min="1"
  max="10"
  aria-label="Invalid quantity"
  value="0"
/>

Field composition

Place the input inside kui-field to inherit label, hint, error, and id wiring. A parent field error also marks the input invalid automatically.

Choose between 1 and 10 seats

<kui-field label="Seats" hint="Choose between 1 and 10 seats">
  <input type="number" kuiNumberInput min="1" max="10" value="4" />
</kui-field>

<kui-field label="Discount" error="Discount must be at least 0%" required>
  <input type="number" kuiNumberInput invalid min="0" max="100" value="-5" />
</kui-field>

Signal Forms

Use Angular Signal Forms [formField] on the same native input. When projected inside kui-field, the field wrapper reads the descendant [formField] and infers the required marker and first error message. Use Signal Forms min(...) and max(...) validators for range constraints instead of native min/max attributes on a [formField] input.

signal-forms-number-input.html
<kui-field label="Count" hint="Enter a value from 1 to 100">
  <input type="number" kuiNumberInput [formField]="profileForm.count" />
</kui-field>

API

Inputs verified against @kikita-labs/ui v1.6.1 public typings.

NameTypeDefaultDescription
size'xs' | 'sm' | 'md' | 'lg''md'Control height from --kui-control-height-*. Generated buttons scale to match.
variant'a' | 'b''b'Button layout. b places minus/plus controls on the sides (recommended). a stacks compact arrow controls on the right.
invalidbooleanfalseApplies an error border. Also inherited automatically from a parent kui-field with an error.
idstring | undefined-Id override for the native input. Falls back to the parent kui-field control id.
minstring | number-Native HTML attribute placed directly on the input. Decrement stops and disables at this value.
maxstring | number-Native HTML attribute placed directly on the input. Increment stops and disables at this value.
stepstring | number1Native HTML attribute. Amount the generated buttons and arrow keys step by.
disabledbooleanfalseNative HTML attribute. Sets data-kui-disabled on the container and disables both generated buttons.
readonlybooleanfalseNative HTML attribute. Sets data-kui-readonly on the container and disables both generated buttons.
--kui-number-input-borderCSS custom property--kui-color-borderBorder color in the default state.
--kui-number-input-dividerCSS custom property--kui-color-borderDivider color between the buttons and the native input.
--kui-number-input-btn-bgCSS custom propertytransparentGenerated button background in the default state.
--kui-number-input-btn-bg-hoverCSS custom property--kui-color-surface-elevatedGenerated button background on hover.
--kui-number-input-btn-textCSS custom property--kui-color-text-secondaryGenerated button icon color.

Accessibility

The native input[type=number] keeps its built-in keyboard and screen-reader semantics.

  • Provide an accessible name through aria-label or a kui-field label.
  • Generated buttons use aria-label="Decrease value" and aria-label="Increase value", plus native disabled and aria-disabled="true" when stepping is not available.
  • Native keyboard behavior on the input remains available: ArrowUp, ArrowDown, Home, and End.
  • Press and hold a generated button for accelerating auto-increment after a 400 ms delay.
  • Place the input inside kui-field to inherit label, hint, error, and id wiring instead of wiring ARIA by hand.