HUA Docs - The Syntax of Emotion

v1.1.0

import { NumberInput } from '@hua-labs/hua';

: 0

: 50

: 0

horizontal

vertical


`value`	`number`	-	Controlled value
`defaultValue`	`number`	`0`	Initial value for uncontrolled mode
`min`	`number`	-	Minimum allowed value
`max`	`number`	-	Maximum allowed value
`step`	`number`	`1`	Value change step amount
`onChange`	`(value: number) => void`	-	Callback when value changes
`disabled`	`boolean`	`false`	Disable the input
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Input size
`showButtons`	`boolean`	`true`	Show increment/decrement buttons
`buttonLayout`	`"horizontal" \| "vertical"`	`"horizontal"`	Button position layout

docs:common.basicUsagetsx

import { NumberInput } from '@hua-labs/hua';

const [count, setCount] = useState(0);

<NumberInput value={count} onChange={setCount} />

With Rangetsx

<NumberInput
  value={value}
  onChange={setValue}
  min={0}
  max={100}
/>

Custom Steptsx

<NumberInput
  value={value}
  onChange={setValue}
  step={5}
  min={0}
  max={100}
/>

Vertical Layouttsx

<NumberInput
  value={value}
  onChange={setValue}
  buttonLayout="vertical"
/>

Quantity Selectortsx

<div className="flex items-center gap-4">
  <Label>Quantity:</Label>
  <NumberInput
    value={quantity}
    onChange={setQuantity}
    min={1}
    max={99}
    size="sm"
  />
</div>

•Keyboard Navigation: Arrow keys increment/decrement value
•Button Labels: Increment/decrement buttons have accessible labels
•Input Mode: Uses inputmode='numeric' for mobile keyboards
•Disabled State: Properly announced as disabled to screen readers

Textarea DatePicker