base-ui-svelte

Number Field

An input for numeric values with increment and decrement controls.

View as Markdown

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

NumberField.Root

Extends div HTML attributes.

PropertyTypeDefaultDescription
valuenumber | null | undefinedControlled value.
defaultValuenumber | nullUncontrolled initial value.
onValueChange((value: number | null, event: Event) => void) | undefinedEvent handler called when the value changes.
minnumber | undefined
maxnumber | undefined
stepnumber
disabledbooleanfalseWhether the control ignores user interaction.
namestring | undefined
requiredboolean
childrenSnippet<[{ value: number | null; disabled: boolean }]>Content rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.
data-scrubbingPresent on the element when applicable.

NumberField.Decrement

Extends button HTML attributes.

PropertyTypeDefaultDescription
disabledbooleanfalseWhether the control ignores user interaction.
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.

NumberField.Group

Extends div HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.

NumberField.Increment

Extends button HTML attributes.

PropertyTypeDefaultDescription
disabledbooleanfalseWhether the control ignores user interaction.
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.

NumberField.Input

Extends input HTML attributes.

PropertyTypeDefaultDescription
disabledbooleanfalseWhether the control ignores user interaction.
Data attributeDescription
data-disabledPresent when the part is disabled.

NumberField.ScrubArea

Extends div HTML attributes.

PropertyTypeDefaultDescription
pixelSensitivitynumber
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-disabledPresent when the part is disabled.
data-scrubbingPresent on the element when applicable.

NumberField.ScrubAreaCursor

Extends span HTML attributes.

PropertyTypeDefaultDescription
childrenSnippetContent rendered inside the part.
Data attributeDescription
data-scrubbingPresent on the element when applicable.