NumberInput

Source code
Table of Contents

Usage

Default

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput label="Clusters" />

With helper text

Clusters provisioned in your region
<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput
  label="Clusters"
  helperText="Clusters provisioned in your region"
/>

Minimum and maximum values

Clusters provisioned in your region
<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

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

Hidden label

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput hideLabel label="Clusters" />

Light variant

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput light label="Clusters" />

Mobile variant

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput mobile label="Clusters" />

Extra-large size

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput size="xl" label="Clusters" />

Small size

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput size="sm" label="Clusters" />

Invalid state

An error occurred
<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput invalid invalidText="An error occurred" label="Clusters" />

Disabled state

<script>
  import { NumberInput } from "carbon-components-svelte";
</script>

<NumberInput disabled label="Clusters" />

Skeleton

<script>
  import { NumberInputSkeleton } from "carbon-components-svelte";
</script>

<NumberInputSkeleton />

Skeleton without label

<script>
  import { NumberInputSkeleton } from "carbon-components-svelte";
</script>

<NumberInputSkeleton hideLabel />
Table of Contents