SusNumberInput

Numeric field with spin buttons — min / max / step / precision.

Package

SusKit · Atoms (commercial)

SusKit · Atoms

Props

Name	Type	Default
`Model`	`Prop<float>`	`0f`	v-model
`Min`	`Prop<float>`	`0f`	v-model
`Max`	`Prop<float>`	`100f`	v-model
`Step`	`Prop<float>`	`1f`	v-model
`Precision`	`Prop<int>`	`0`	v-model
`Label`	`Prop<string>`	`""`	v-model
`Hint`	`Prop<string>`	`""`	v-model
`Error`	`Prop<string>`	`""`	v-model
`Variant`	`Prop<string>`	`"outlined"`	v-model
`Density`	`Prop<string>`	`"default"`	v-model
`Disabled`	`Prop<bool>`	`false`	v-model
`Readonly`	`Prop<bool>`	`false`	v-model
`HideSpinButtons`	`Prop<bool>`	`false`	v-model

Slots

No slots.

Events

Name	Field	Payload
`Change`	`OnChange`	`float`

Style hooks

USS class contract — override appearance without touching C#. States toggle via these classes:

sus-number-input
sus-number-input__control
sus-number-input__error
sus-number-input__field
sus-number-input__hint
sus-number-input__label
sus-number-input__spin
sus-number-input__spin-icon
sus-number-input--density-comfortable
sus-number-input--density-compact
sus-number-input--disabled
sus-number-input--error
sus-number-input--filled
sus-number-input--focused
sus-number-input--hide-spin
sus-number-input--outlined
sus-number-input--readonly
unity-base-text-field
unity-base-text-field__input
unity-label
unity-text-element
unity-text-field

Usage

xml

<template>
  <sus:SusNumberInput Label="Party size"
                      :Model="PartySize.Value"
                      Min="1"
                      Max="8"
                      Step="1"
                      Variant="outlined"
                      @change="OnPartySize" />
</template>

<script>
public Prop<float> PartySize = new(4f);
void OnPartySize(float value) { /* … */ }
</script>

csharp

var num = new SusNumberInput();
num.Label.Value = "Quantity";
num.Model.Value = 1f;
num.Min.Value = 0f;
num.Max.Value = 99f;
num.Step.Value = 1f;
num.OnChange += value => { /* … */ };

Notes

HideSpinButtons keeps typing without +/- affordances.
Precision controls decimal places in the formatted field.

SusNumberInput ​