carbon-design-system/carbon-components-svelte v0.100.0

on GitHub

NumberInput improvements

This release contains multiple NumberInput improvements.

1. disableWheel: Prevent scroll wheel from changing value

Prevents accidental value changes when the user scrolls over the input (e.g., in long forms).

<NumberInput
  disableWheel
  labelText="Clusters"
  value={0}
/>

2. stepStartValue: Custom starting point for stepping

When the input is empty or zero, the first increment/decrement jumps directly to stepStartValue instead of stepping from 0. Useful when zero is outside the valid range or when a sensible default exists (e.g., current year).

<NumberInput
  stepStartValue={2026}
  allowEmpty
  min={2026}
  max={2100}
  labelText="Year"
/>

3. Validation with auto min/max, locale formatting, and validate prop

Auto min/max validation

Values outside min/max automatically show an invalid state:

<NumberInput
  min={4}
  max={20}
  value={4}
  invalidText="Number must be between 4 and 20."
  labelText="Clusters (4 min, 20 max)"
/>

Locale formatting

Format numbers according to a BCP 47 locale using Intl.NumberFormat:

<NumberInput
  locale="de-DE"
  value={1234.5}
  labelText="Amount (German)"
/>

Custom validate function

Provide custom validation logic. Return false for invalid, true to force valid (overriding auto bounds), or undefined to defer to built-in validation:

<NumberInput
  validate={(raw) => {
    const num = Number(raw);
    return Number.isNaN(num) ? undefined : num % 2 === 0;
  }}
  invalidText="Must be an even number"
  labelText="Even number"
  value={0}
/>

4. Dispatch blur and click:stepper events with value

Blur event (dispatched, not forwarded)

The blur event is now dispatched with { event, value }. Access the original FocusEvent via e.detail.event:

<NumberInput
  on:blur={(e) => {
    console.log("Value:", e.detail.value);   // number | null
    console.log("FocusEvent:", e.detail.event);
  }}
/>

click:stepper event

Fires when the increment/decrement buttons are clicked. The event detail includes the updated value and direction:

<NumberInput
  on:click:stepper={(e) => {
    console.log("Value:", e.detail.value);       // number
    console.log("Direction:", e.detail.direction); // "up" | "down"
  }}
/>

What's Changed

Breaking Changes

• number-input: blur event is dispatched, not forwarded; access event through e.detail.event

Features

• feat(data-table): add rowClass prop by @Marshallup in #2586
• feat(pagination): add dynamicPageSizes prop by @metonym in #2624
• feat(tooltip-icon): add size prop by @metonym in #2591
• feat(number-input): add disableWheel prop by @metonym in #2622
• feat(number-input): add stepStartValue prop by @metonym in #2628
• feat(number-input): add validation with auto min/max, locale formatting, validate prop by @metonym in #2631
• feat(number-input)!: dispatch blur, click:stepper events with value by @metonym in #2630
• feat(dropdown): add labelChildren slot by @metonym in #2633

New Contributors

• @Marshallup made their first contribution in #2586

Full Changelog: v0.99.3...v0.100.0