---
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)" />

## With step value

<NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />

## No value and error states

Set `required` to `false` to allow for no value.

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

Set `invalid` to `true` to force a `error` state for the input.

The input is reactive to `min`, `max` and `required` attributes.

<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 />