How do I constrain the values of a NumberBox?

Use the min, max, and step props to bound and increment the numeric value.

Does NumberBox share props with TextBox?

Yes. NumberBox inherits TextBox props, so most TextBox configuration also applies.

The NumberBox component allows users to input numeric values with specified constraints such as minimum, maximum, and step values.

<script>
	import { NumberBox } from 'fluentui-svelte';
</script>

<NumberBox value={0} min={0} max={100} step={1} />

A brief explanation of the props that really need explaining. You can see the rest of the props here .

The variant prop determines the visual style of the NumberBox.

View Code

Name	Type	Description
`value`	`number`	The current value of the NumberBox.
`variant`	`'inline' \\| 'compact'`	The visual style of the NumberBox, e.g., 'inline', 'compact'.
`ref`	`HTMLInputElement`	The DOM reference to the input element.
TextBox Props		Additional props inherited from the TextBox component.