Composant · Formulaire

NumberInput

Stable

Champ nombre avec boutons incrément/décrément, min/max, pas de pas, états d’erreur et liaison bidirectionnelle.

Exemples

Tailles

Taille sm

Taille md

Taille lg

Voir le code (Svelte)

<div class="docs-demo-stack">
  <NumberInput
    size="sm"
    label="Taille sm"
    value={8}
    defaultValue={8}
    modelValue={8}
    placeholder="Valeur sm"
  />
  <NumberInput
    size="md"
    label="Taille md"
    value={16}
    defaultValue={16}
    modelValue={16}
    placeholder="Valeur md"
  />
  <NumberInput
    size="lg"
    label="Taille lg"
    value={128}
    defaultValue={128}
    modelValue={128}
    placeholder="Valeur lg"
  />
</div>

Validation

Bornes + pas min 0, max 100, pas 10

Erreur La valeur est hors plage.

Désactivé

Voir le code (Svelte)

<div class="docs-demo-stack">
  <NumberInput
    label="Bornes + pas"
    value={42}
    defaultValue={42}
    modelValue={42}
    min={0}
    max={100}
    step={10}
    helperText="min 0, max 100, pas 10"
  />
  <NumberInput
    label="Erreur"
    min={1}
    max={10}
    step={1}
    placeholder="Doit être entre 1 et 10"
    invalid
    errorText="La valeur est hors plage."
  />
  <NumberInput
    label="Désactivé"
    value={10}
    defaultValue={10}
    modelValue={10}
    disabled
  />
</div>

Boutons custom

Étiquettes personnalisées

Voir le code (Svelte)

<NumberInput
  label="Étiquettes personnalisées"
  min={0}
  max={9}
  incrementLabel="Augmenter"
  decrementLabel="Diminuer"
/>

Valeur courante : null

API

Prop	Type	Default
`value`	`number \| null` (`$bindable`)	`null`
`label`	`string`	optionnel
`helperText`	`string`	optionnel
`errorText`	`string`	optionnel
`invalid`	`boolean`	`false`
`size`	`"sm" \| "md" \| "lg"`	`"md"`
`min`	`number`	optionnel
`max`	`number`	optionnel
`step`	`number`	`1`
`incrementLabel`	`string`	`"Increment value"`
`decrementLabel`	`string`	`"Decrement value"`
`disabled`	`boolean`	`false`
`class`	`string`	optionnel

Notes d’usage

Le bouton `+`/`-` déclenche le clamp interne (bornes respectées) ; l’édition manuelle garde la saisie native du navigateur.

`value` est bindable (`number | null`) et peut rester `null` quand le champ est vidé.

La valeur est rendue via un `<input type="number">`; vous pouvez remapper `oninput` / `onchange` sur le composant grâce au spread des props HTML natives.

Tokens utilisés

--st-component-control-background
--st-component-control-border
--st-component-control-text
--st-component-control-radius
--st-component-control-hoverBorder
--st-component-control-hoverBackground
--st-component-control-focusRing
--st-component-control-invalidBorder
--st-component-control-disabledText
--st-component-control-smHeight
--st-component-control-mdHeight
--st-component-control-lgHeight
--st-component-field-labelText
--st-component-field-gap
--st-component-field-helpText
--st-component-field-errorText
--st-component-field-maxWidth
--st-semantic-text-muted
--st-semantic-text-secondary
--st-semantic-text-primary
--st-semantic-surface-default
--st-semantic-surface-subtle
--st-semantic-border-subtle
--st-semantic-border-strong
--st-motion-fast
--st-motion-easing
--st-semantic-feedback-error