NumberInput

<ts-number-input> vv0.6.3

The ts-number-input component.

Open in Storybook for interactive demos.

Preview

<ts-number-input size="md" step="1" value="0"></ts-number-input>

Property	Attribute	Type	Default	Description
`disabled`	`disabled`	`boolean`	`false`	Renders the input as disabled.
`error`	`error`	`string \| undefined`	—	Error message — renders the input in an error state.
`helpText`	`help-text`	`string \| undefined`	—	Help text displayed below the input.
`label`	`label`	`string \| undefined`	—	Label text displayed above the input.
`max`	`max`	`number \| undefined`	—	Maximum allowed value.
`min`	`min`	`number \| undefined`	—	Minimum allowed value.
`name`	`name`	`string \| undefined`	—	Name attribute for form submission.
`precision`	`precision`	`number \| undefined`	—	Number of decimal places to display.
`readonly`	`readonly`	`boolean`	`false`	Renders the input as readonly.
`required`	`required`	`boolean`	`false`	Makes the input required.
`size`	`size`	`"lg" \| "md" \| "sm" \| "xl" \| "xs"`	`'md'`	The input’s size.
`step`	`step`	`number`	`1`	Step increment/decrement amount.
`value`	`value`	`number`	`0`	The current numeric value.

Event	Detail	Bubbles	Composed	Description
`tsChange`	`\{ value: number; \}`	Yes	Yes	Emitted on blur / commit.
`tsInput`	`\{ value: number; \}`	Yes	Yes	Emitted on each value change.

Method	Signature	Description
`decrement`	`decrement() => Promise<void>`	Decrease value by step.
`increment`	`increment() => Promise<void>`	Increase value by step.

Use ::part() to style internal elements:

Part	Description
`base`	The outer wrapper containing buttons and input.
`decrement`	The decrement button.
`error-text`	The error message wrapper.
`help-text`	The help text wrapper.
`increment`	The increment button.
`input`	The native input element.
`label`	The label element.

ts-number-input::part(base) {
  /* your custom styles */
}

<ts-number-input size="md" step="1" value="0"></ts-number-input>

import { TsNumberInput } from '@tessera-ui/react';

<TsNumberInput size="md" step="1"></TsNumberInput>