NumberField

A form control for numeric input with validation and optional spin buttons.

Number Field

Choose a value from 0 to 100

Usage

Use standalone, or wrap NumberInput to share state.

Svelte

<NumberField {...props} />

<NumberField {...props}>
  <NumberInput {...props} />
</NumberField>

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte

<div class="whole">
  <div class="top" conditional: label or aux>
    <label class="label" conditional>
      {label}
      <span class="extra" conditional>{extra}</span>
    </label>
    <span class="aux" conditional>{aux}</span>
  </div>
  <div class="middle">
    <span class="left" conditional>{left}</span>
    {#if children}{@render children()}{:else}<NumberInput />{/if}
    <span class="right" conditional>{right}</span>
  </div>
  <div class="bottom" conditional: has text, or always when reserve; role="alert only on error">{bottom}</div>
</div>

Props

Name	Type	Default	Description
`label`	`string`	-	Field label
`extra`	`string`	-	Extra text shown with the label
`aux`	`Snippet`	-	Auxiliary content; receives value, variant, and input element
`left`	`Snippet`	-	Content before the control; receives value, variant, and input element
`right`	`Snippet`	-	Content after the control; receives value, variant, and input element
`bottom`	`string`	-	Bottom message
`reserve`	`boolean`	`false`	Renders the bottom element even without a message to prevent layout shift
`value`	`number`	-	Bindable field value; undefined means empty
`validations`	`NumberFieldValidation`	-	Validation functions for input values
`name`	`string`	-	Form submission name
`element`	`HTMLInputElement`	-	Bindable input element
`styling`	`SVSClass`	-	Styling override
`variant`	`SVSVariant`	`NEUTRAL`	Bindable variant
`numberInput`	`Omit`	-	Flat props for the default inner `NumberInput`; ignored when `children` provides a custom control
`children`	`Snippet`	-	Compound form child control that owns its own props

Styling

To learn more, see Styling.

Variant Management

In the initial state or when there is no input value, neutral is applied. After a value is entered, the variant switches to active if validation succeeds, or to inactive if validation fails. When validating the form, inactive is applied when validation fails. If the variant prop is specified, the specified value is applied instead of neutral.

Default Class Name

svs-number-field

Accessibility

ARIA Roles and Attributes

The component applies these automatically:

Field (whole <div>): role="group" and aria-labelledby pointing to the label part when label text is present.
Message (bottom): role="alert" when the field is inactive and showing an error message.

Provide label text for the field's accessible name; the component wires that label to the group instead of requiring an author-passed aria-label. Spinbutton ARIA and keyboard behavior for the default control are documented on NumberInput.

Exports

Types

TypeScript

type NumberFieldValidation = SVSFieldValidation<number | undefined>;
interface NumberFieldProps {
  label?: string;
  extra?: string;
  aux?: Snippet<[number | undefined, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
  left?: Snippet<[number | undefined, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
  right?: Snippet<[number | undefined, string, HTMLInputElement | undefined]>; // Snippet<[value,variant,element]>
  bottom?: string;
  reserve?: boolean; // (false)
  value?: number; // bindable; undefined = empty
  validations?: NumberFieldValidation[];
  name?: string;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: SVSVariant; // bindable (VARIANT.NEUTRAL)
  numberInput?: Omit<NumberInputProps, NumberInputReqdProps | NumberInputBindProps | "name" | "variant">; // default <NumberInput/> props
  children?: Snippet;
}
type NumberFieldReqdProps = never;
type NumberFieldBindProps = "value" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Number Field

Choose a value from 0 to 100

With Interactive Variant

Preset for Demo

Free Input

Enter variant as you like

Even Score (0-100)

pts

Use the spin buttons or type a number