Number input

A numeric stepper with bounds.

import { BuiNumberInput } from 'ng-blatui';

<bui-number-input [(value)]="qty" ariaLabel="Quantity" />

Min / max

<bui-number-input [value]="2" [min]="1" [max]="10" ariaLabel="Guests" />

<bui-number-input [value]="50" [step]="5" ariaLabel="Step of 5" />

<bui-number-input [value]="3" [disabled]="true" ariaLabel="Disabled" />

<!-- size = sm | default | lg -->
<bui-number-input [value]="2" size="sm" />
<bui-number-input [value]="2" size="lg" />

Compose a cart/product quantity stepper from the number input — start at 1 and clamp the lower bound with [min]="1".

<!-- cart/product quantity stepper -->
<bui-number-input [value]="1" [min]="1" size="sm" ariaLabel="Quantity" />

Prop	Type	Default	Description
`min`	`number \| null`	`null`	Minimum allowed value, or null for no lower bound.
`max`	`number \| null`	`null`	Maximum allowed value, or null for no upper bound.
`step`	`number`	`1`	Amount added or subtracted per step.
`size`	`NumberInputSize`	`'default'`	Size preset controlling stepper button and field dimensions.
`ariaLabel`	`string`	`''`	Accessible label for the number field.
`decreaseLabel`	`string`	—	Accessible label override for the decrease button.
`increaseLabel`	`string`	—	Accessible label override for the increase button.

Bind with [(name)], or one-way as an input.

Prop	Type	Default	Description
`value`	`number`	`0`	Current number. Two-way bindable with `[(value)]`.
`disabled`	`boolean`	`false`	Whether the control is disabled. Two-way bindable with `[(disabled)]`.

NumberInputSize — Size preset controlling stepper button and field dimensions.

"default" | "lg" | "sm"

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.