# NumberFormat Props (свойства) для компонента NumberFormat: [{"name":"thousandSeparator","type":{"name":"string | boolean"}},{"name":"decimalSeparator","type":{"name":"string"}},{"name":"thousandsGroupStyle","type":{"name":"enum","raw":"\"none\" | \"thousand\" | \"lakh\" | \"wan\"","value":[{"value":"\"none\""},{"value":"\"thousand\""},{"value":"\"lakh\""},{"value":"\"wan\""}]}},{"name":"decimalScale","type":{"name":"number"}},{"name":"fixedDecimalScale","type":{"name":"boolean"}},{"name":"allowNegative","type":{"name":"boolean"}},{"name":"allowLeadingZeros","type":{"name":"boolean"}},{"name":"isAllowed","type":{"name":"((values: NumberFormatValues) => boolean)"}},{"name":"onChange","type":{"name":"(((event?: ChangeEvent<HTMLInputElement>, values?: NumberFormatValues) => void) & ChangeEventHandler<HTMLInputElement>) | undefined"}},{"name":"contentLeft","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"contentRight","type":{"name":"ReactElement<any, string | JSXElementConstructor<any>>"}},{"name":"view","type":{"name":"enum","raw":"\"default\" | TextFieldView | \"innerLabel\"","value":[{"value":"\"default\""},{"value":"\"default\"","description":"","fullComment":"","tags":{}},{"value":"\"innerLabel\"","description":"","fullComment":"","tags":{}},{"value":"\"innerLabel\""}]}},{"name":"status","type":{"name":"enum","raw":"\"warning\" | \"success\" | \"error\"","value":[{"value":"\"warning\""},{"value":"\"success\""},{"value":"\"error\""}]}},{"name":"caption","type":{"name":"string"}},{"name":"label","type":{"name":"string | number"}},{"name":"size","type":{"name":"enum","raw":"\"m\" | \"s\" | \"l\" | \"xs\"","value":[{"value":"\"m\""},{"value":"\"s\""},{"value":"\"l\""},{"value":"\"xs\""}]}},{"name":"$isFocused","type":{"name":"boolean"}},{"name":"htmlSize","type":{"name":"number"}},{"name":"animatedHint","type":{"name":"enum","raw":"\"placeholder\" | \"label\"","value":[{"value":"\"placeholder\""},{"value":"\"label\""}]}},{"name":"onSearch","type":{"name":"((value: string, event?: KeyboardEvent<HTMLInputElement>) => void)"}},{"name":"helperText","type":{"name":"ReactNode"}},{"name":"clear","type":{"name":"boolean"}},{"name":"hasDivider","type":{"name":"boolean"}},{"name":"hintText","type":{"name":"string"}},{"name":"hintTrigger","type":{"name":"enum","raw":"\"hover\" | \"click\"","value":[{"value":"\"hover\""},{"value":"\"click\""}]}},{"name":"hintView","type":{"name":"enum","raw":"\"default\"","value":[{"value":"\"default\""}]}},{"name":"hintSize","type":{"name":"enum","raw":"\"m\" | \"s\"","value":[{"value":"\"m\""},{"value":"\"s\""}]}},{"name":"hintTarget","type":{"name":"ReactNode"}},{"name":"hintPlacement","type":{"name":"Placement | ComputedPlacement[]"}},{"name":"hintHasArrow","type":{"name":"boolean"}},{"name":"hintOffset","type":{"name":"[number, number]"}},{"name":"hintWidth","type":{"name":"string"}},{"name":"hintContentLeft","type":{"name":"ReactNode"}},{"name":"labelPlacement","type":{"name":"enum","raw":"\"outer\" | \"inner\"","value":[{"value":"\"outer\""},{"value":"\"inner\""}]}},{"name":"textBefore","type":{"name":"string"}},{"name":"textAfter","type":{"name":"string"}},{"name":"keepPlaceholder","type":{"name":"boolean"}},{"name":"requiredPlacement","type":{"name":"enum","raw":"\"right\" | \"left\"","value":[{"value":"\"right\""},{"value":"\"left\""}]}},{"name":"optional","type":{"name":"boolean"}},{"name":"enumerationType","type":{"name":"enum","raw":"\"chip\" | \"plain\"","value":[{"value":"\"chip\""},{"value":"\"plain\""}]}},{"name":"chipView","type":{"name":"enum","raw":"\"default\" | \"secondary\" | \"accent\" | \"positive\" | \"warning\" | \"negative\"","value":[{"value":"\"default\""},{"value":"\"secondary\""},{"value":"\"accent\""},{"value":"\"positive\""},{"value":"\"warning\""},{"value":"\"negative\""}]}},{"name":"chipType","type":{"name":"enum","raw":"\"text\" | \"default\"","value":[{"value":"\"text\""},{"value":"\"default\""}]}},{"name":"titleCaption","type":{"name":"ReactNode"}},{"name":"chips","type":{"name":"TextFieldPrimitiveValue[]"}},{"name":"onChangeChips","type":{"name":"((value: TextFieldPrimitiveValue[]) => void)"}},{"name":"chipValidator","type":{"name":"((value: string) => ChipValidatorReturn)"}}] ## Использование Компонент  `NumberFormat`  представляет собой поле ввода с поле ввода числовых значений.
Он реализован на компоненте  TextField 
и наследует практически все его свойства ( `size` ,  `view` ,  `disabled` ,  `label`  и тд.) ### Разделитель тысяч и десятичных знаков Разделитель тысяч задается с помощью свойства  `thousandSeparator` ,
а разделитель десятичных знаков с помощью  `decimalSeparator` :
```tsx
import React from 'react';
import { NumberFormat } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<NumberFormat
size="l"
thousandSeparator=" "
decimalSeparator="."
defaultValue="123456.789"
/>
<NumberFormat
size="l"
thousandSeparator="/"
decimalSeparator=","
defaultValue="123456,789"
/>
<NumberFormat
size="l"
thousandSeparator=","
decimalSeparator="$"
defaultValue="123456$789"
/>
</div>
);
}
```
### Стиль группировки тысяч Поддерживается четыре вида группировок: 'thousand' (123 456 789) 'lakh' (индийский стиль, 12 34 56 789) 'wan' (китайский стиль, 1 2345 6789) 'none' (без группировки) 
```tsx
import React from 'react';
import { NumberFormat } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<NumberFormat
size="l"
thousandSeparator=" "
defaultValue="123456789"
thousandsGroupStyle="thousand"
/>
<NumberFormat
size="l"
thousandSeparator=" "
defaultValue="123456789"
thousandsGroupStyle="lakh"
/>
<NumberFormat
size="l"
thousandSeparator=" "
defaultValue="123456789"
thousandsGroupStyle="wan"
/>
<NumberFormat
size="l"
thousandSeparator=" "
defaultValue="123456789"
thousandsGroupStyle="none"
/>
</div>
);
}
```
### Количество знаков после запятой Количество знаков после запятой задается с помощью свойства  `decimalScale` .
Если же необходимо, чтобы число имело определенное количество знаков после запятой, то нужно задать  `fixedDecimalScale` :
```tsx
import React from 'react';
import { NumberFormat } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<NumberFormat
size="l"
defaultValue="123"
thousandSeparator=" "
decimalSeparator="."
decimalScale={4}
fixedDecimalScale
/>
<NumberFormat
size="l"
defaultValue="123.1"
thousandSeparator=" "
decimalSeparator="."
decimalScale={4}
fixedDecimalScale
/>
</div>
);
}
```
### Отрицательные числа Свойство  ` allowNegative`  позволяет вводить отрицательные числа: 
```tsx
import React from 'react';
import { NumberFormat } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<NumberFormat
size="l"
defaultValue="-123"
thousandSeparator=" "
decimalSeparator="."
allowNegative
/>
</div>
);
}
```
### Ведущие нули Чтобы разрешить в числе ведущие нули, нуджно указать свойство  `allowLeadingZeros` : 
```tsx
import React from 'react';
import { NumberFormat } from '@salutejs/plasma-web';
export function App() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<NumberFormat
size="l"
defaultValue="000123.456"
thousandSeparator=" "
decimalSeparator="."
allowLeadingZeros
/>
</div>
);
}
```
### Функция форматирования Для приведения числа к нужному формату можно использовать функцию  `numberFormatter` .
Она принимает два параметра: строковое значение объект с параметрами форматирования
```tsx
const num = 100.23
const options = {
/**
* Разделитель тысяч.
* Может быть строкой (например, " ").
* @example 123 456 789
*/
thousandSeparator: ' ',
/**
* Разделитель десятичных знаков (например, ".").
* @example 123.456
*/
decimalSeparator: '.',
/**
* Количество знаков после запятой.
*/
decimalScale: 3,
/**
* Фиксирует количество знаков после запятой, даже если число их не содержит (добавляет нули).
*/
fixedDecimalScale: false,
/**
* Разрешает ввод отрицательных чисел.
*/
allowNegative: true,
/**
* Разрешает ведущие нули (например, "0123").
*/
allowLeadingZeros: false,
}
const value = numberFormatter(String(num), options)
```