Number Input — Playground
size
variant
State
<input type="number" kuiNumberInput aria-label="Quantity" />| Name | Type | Default | Description |
|---|---|---|---|
| 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. |
| invalid | boolean | false | Applies an error border. Also inherited automatically from a parent kui-field with an error. |
| id | string | undefined | - | Id override for the native input. Falls back to the parent kui-field control id. |
| min | string | number | - | Native HTML attribute placed directly on the input. Decrement stops and disables at this value. |
| max | string | number | - | Native HTML attribute placed directly on the input. Increment stops and disables at this value. |
| step | string | number | 1 | Native HTML attribute. Amount the generated buttons and arrow keys step by. |
| disabled | boolean | false | Native HTML attribute. Sets data-kui-disabled on the container and disables both generated buttons. |
| readonly | boolean | false | Native HTML attribute. Sets data-kui-readonly on the container and disables both generated buttons. |
| --kui-number-input-border | CSS custom property | --kui-color-border | Border color in the default state. |
| --kui-number-input-divider | CSS custom property | --kui-color-border | Divider color between the buttons and the native input. |
| --kui-number-input-btn-bg | CSS custom property | transparent | Generated button background in the default state. |
| --kui-number-input-btn-bg-hover | CSS custom property | --kui-color-surface-elevated | Generated button background on hover. |
| --kui-number-input-btn-text | CSS custom property | --kui-color-text-secondary | Generated button icon color. |
Inputs verified against @kikita-labs/ui v1.6.1 public typings.