---
components: ["NumberInput", "NumberInputSkeleton"]
---

<script>
  import { NumberInput, NumberInputSkeleton } from "carbon-components-svelte";
  import Preview from "../../components/Preview.svelte";
</script>

### Default

This component requires a numerical value for `value`.

See [#no-value](#no-value) to allow for an empty value.

<NumberInput label="Clusters" value={0} />

### With helper text

<NumberInput label="Clusters" value={0} helperText="Clusters provisioned in your region" />

### Minimum and maximum values

<NumberInput min="{4}" max="{20}" value="{4}" invalidText="Number must be between 4 and 20." helperText="Clusters provisioned in your region" label="Clusters (4 min, 20 max)" />

### No value

Set `allowEmpty` to `true` to allow for no value.

Set `value` to `null` to denote "no value."

<FileSource src="/framed/NumberInput/NumberInputEmpty" />

### Hidden label

<NumberInput hideLabel label="Clusters" value={0} />

### Hidden steppers

<NumberInput hideSteppers label="Clusters" value={0} />

### Light variant

<NumberInput light label="Clusters" value={0} />

### Read-only variant

<NumberInput readonly label="Clusters" value={0} />

### Extra-large size

<NumberInput size="xl" label="Clusters" value={0} />

### Small size

<NumberInput size="sm" label="Clusters" value={0} />

### Invalid state

<NumberInput invalid invalidText="Invalid value" label="Clusters" value={0} />

### Warning state

<NumberInput warn warnText="A high number may impact initial rollout" label="Clusters" value={25} />

### Disabled state

<NumberInput disabled label="Clusters" value={0} />

### Skeleton

<NumberInputSkeleton />

### Skeleton without label

<NumberInputSkeleton hideLabel />