# Numeric

**Path:** Components/Form Inputs

[Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md)

---

Numeric

 RbNumeric component provides numeric input with culture-aware formatting, thousands separator, decimal precision control, and min/max constraints.

 Basic Usage

 Simple numeric inputs with integer and decimal values.

 Show code

 Integer 

 Decimal (2 places) 

 With Placeholder 

 With Clear Button 

 Integer: 0

 Decimal: 0

 With Placeholder: 

 With Clear: 123.45

 Variants

 Different visual styles: Default, Outlined and Filled variants.

 Show code

 Default 
 Primary 
 Secondary 
 Info 
 Warning 
 Danger 
 Success 

 Default 

 Outlined 

 Filled 

 Required Field

 Mark numeric inputs as required with asterisk indicator for all variants.

 Show code

 Default Required 

 Outlined Required 

 Filled Required 

 Decimal Precision

 Control decimal places with Decimals parameter (0, 2, 4, etc).

 Show code

 No Decimals (0) 

 2 Decimal Places 

 4 Decimal Places 

 6 Decimal Places 

 0 Decimals: 123

 2 Decimals: 123.45

 4 Decimals: 123.4567

 6 Decimals: 123.456789

 Min & Max

 Constrain numeric values within specific ranges using Min and Max parameters.

 Show code

 Range 0 to 100 

 Range -50 to 50 

 Price (0.01 to 9999.99) 

 Percentage (0 to 100) 

 Range 0-100: 50

 Range -50 to 50: 0

 Price: ¤99.99

 Percentage: 75.50%

 Culture & Format

 Culture-aware formatting with different decimal and thousands separators.

 Show code

 US Format (1,234.56) 

 EU Format (1.234,56) 

 German Format (1.234,56) 

 No Thousands Separator 

 US: 1,234.56

 EU: 1 234,56

 German: 1.234,56

 No Separator: 1234.56

 Data Types

 Support for different numeric types: int, long, decimal, double, float.

 Show code

 Int (32-bit integer) 

 Long (64-bit integer) 

 Decimal (high precision) 

 Double (floating point) 

 Float (single precision) 

 Int: 12345 (Type: Int32)

 Long: 1234567890 (Type: Int64)

 Decimal: 123.4567 (Type: Decimal)

 Double: 123.4567 (Type: Double)

 Float: 123.45 (Type: Single)

 BodyClick Mode

 Click anywhere on the input to trigger custom actions. Input is readonly to prevent manual typing.

 Show code

 Click to increment by 10 

 Click to cycle values 

 Counter: 0

 Selected Value: 10

 Readonly & Disabled

 Control input interaction states with Readonly and Disabled parameters.

 Show code

 Normal 

 Readonly 

 Disabled 

 Normal: 100.50

 Readonly: 200.75

 Disabled: 300.25

 RTL Support

 Use the component inside an RTL container with localized labels and values.

 Show code

 المبلغ 

 الضريبة 

 ✕

 Contents