Number Box

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

Usage

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

<NumberBox aria-label="Quantity" value={0} min={0} max={100} step={1} />

Shape

Set shape to rounded (default), square, or circular.

View Code

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

<NumberBox shape="rounded" aria-label="rounded" value={42} />
<NumberBox shape="square" aria-label="square" value={42} />
<NumberBox shape="circular" aria-label="circular" value={42} />

Variant

The variant prop determines the visual style of the NumberBox.

View Code

<NumberBox aria-label="Inline quantity" variant="inline" value={42} min={0} max={100} step={1} />
<NumberBox aria-label="Compact quantity" variant="compact" value={42} min={0} max={100} step={1} />

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

Component Props

Name	Type	Default	Description
`value` bindable	`number` \| `null`		The current value of the input.
`variant`	`'inline'` \| `'compact'`	`'inline'`	How the increment and decrement buttons are laid out.
`TextBoxProps` without `type`