Number Input — Playground
size
variant
State
<input type="number" kuiNumberInput aria-label="Quantity" />| Name | Type | Default | Description |
|---|---|---|---|
| size | 'xs' | 'sm' | 'md' | 'lg' | undefined | undefined | Control height from --kui-control-height-*; generated buttons scale to match. Resolved from defaults.numberInput.size, then the parent field, then the global defaults.size, then md. |
| variant | 'stacked' | 'split' | undefined | undefined | Button layout. split places minus/plus controls on the sides (recommended); stacked stacks compact arrows on the right. Falls back to defaults.numberInput.variant, then split. |
| 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-input-bg | CSS custom property | Field | Shared control background color. |
| --kui-input-bg-disabled | CSS custom property | var(--kui-input-bg) | Shared background color used for disabled and readonly states. |
| --kui-number-input-border | CSS custom property | --kui-input-border | Optional number-input border override; falls back to the shared input border. |
| --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. |
| KuiNumberInputOptions | interface | - | Shape of defaults.numberInput: size and variant. |
Inputs verified against @kikita-labs/ui v2.0.0 public typings.