# Number Picker

The NumberPicker component is a numeric input control that leverages the native HTML number input field. It provides a fluent API to configure properties such as minimum, maximum, and step values. As part of the Tesserae Components group, it is ideal for scenarios where users need to select or input a numerical value. In addition, it supports text formatting features and style customizations like background and foreground colors.

Instantiate a NumberPicker using the Tesserae.UI helper method. You can create a default NumberPicker or initialize it with a starting value, and then chain configuration methods to set properties like minimum, maximum, or step values.

using System;
using Tesserae;
using static Tesserae.UI;

var numberPicker = NumberPicker()           // Creates a NumberPicker with default initial value of 0
    .SetMin(5)                             // Sets the minimum allowed value
    .SetMax(20)                            // Sets the maximum allowed value
    .SetStep(5);                           // Sets the step increment value

// Render the control on the page (assuming a container exists)
numberPicker.Render();

• SetMax(int max)
  Sets the maximum allowed value for the NumberPicker.

• SetMin(int min)
  Sets the minimum allowed value for the NumberPicker.

• SetStep(int step)
  Sets the step increment value for the NumberPicker.

• int Value (read-only):
  Retrieves the current numerical value from the input.

• int Max:
  Gets or sets the maximum allowed value.

• int Min:
  Gets or sets the minimum allowed value.

• int Step:
  Gets or sets the step increment value.

• TextSize Size:
  Gets or sets the font size applied to the input text.

• TextWeight Weight:
  Gets or sets the font weight applied to the input text.

• TextAlign TextAlign:
  Gets or sets the text alignment within the input field.

• string Background:
  Gets or sets the background color style of the input.

• string Foreground:
  Gets or sets the foreground (text) color style of the input.

The following sample demonstrates different configurations of the NumberPicker, including default initial values, step increments, minimum and maximum constraints, and the disabled/required states.

using System;
using Tesserae;
using static Tesserae.UI;

var stack = Stack().Width(40.percent()).Children(
    Label("Standard").SetContent(NumberPicker()),
    Label("With default initial value of 2").SetContent(NumberPicker(2)),
    Label("With step increment of 10").SetContent(NumberPicker().SetStep(10)),
    Label("With max of 10").SetContent(NumberPicker().SetMax(10)),
    Label("With min of 5").SetContent(NumberPicker(8).SetMin(5)),
    Label("Disabled").Disabled().SetContent(NumberPicker().Disabled()),
    Label("Required").Required().SetContent(NumberPicker().Required()),
    Label("With error message").SetContent(NumberPicker().Error("Error message").IsInvalid()),
    Label("With validation")
        .SetContent(NumberPicker().Validation(numberPicker => 
            numberPicker.Value % 2 == 0 ? null : "Please choose an even value"))
);

stack.Render();

• TextBox
• Slider