Live Demo

Properties

Name Type Default TextField Description
children node ✓
className string ✓ The css class name of the root element.
disabled bool false ✓ Disables the input field if set to true.
floatingLabelFixed bool false ✓ If true, the floating label will float even when there is no value.
id string ✓ The id prop for the input field.
name string ✓ Name applied to the input.
fullWidth bool false ✓ If true, the field receives the property width 100%.
underlineShow bool true ✓ If true, shows the underline for the input field.
defaultValue number ✓ The number to use for the default value. Must be in range [min, max] if any is setted.
strategy 'ignore' | 'warn' | 'allow' 'allow' ❌ Strategy to use when user presses key and when value prop change it's value.
min number ❌ The number used as minimum value limit. Must be less than max.
max number ❌ The number used as maximum value limit. Must be greater than min.
reqired bool false ❌ If true and if input is left empty than instead of 'clean', 'required' error will be emited throughout onError handler if useStrategy is not 'ignore'.
value string ✓ The value of the input field.
onChange function ✓ Callback function that is fired when input filed must change it's value. Signature: function(event: React.FormEvent, value: string) => void.
onError function ❌ Callback function that is fired when input error status changes and strategy is not 'ignore'. Signature: function(error: 'none' | 'invalidSymbol' | 'incompleteNumber' | 'singleMinus' | 'singleFloatingPoint' | 'singleZero' | 'min' | 'max' | 'required' | 'clean') => void.
onValid function ❌ Callback function that is fired when input's value is a valid number. Signature: function(value: number) => void
onRequestValue* function ❌ Callback function that is fired when strategy is 'warn' or 'ignore', input is controlled and an invalid number value is passed. It provides valid number value which needs to be setted. Signature: function(value: string) => void
errorText node ✓ The error content to display.
errorStyle object ✓ The style object to use to override error styles.
floatingLabelFocusStyle object ✓ The style object to use to override floating label styles when focused.
floatingLabelStyle object ✓ The style object to use to override floating label styles.
floatingLabelText node ✓ The content to use for the floating label element.
hintStyle object ✓ Override the inline-styles of the TextField's hint text element.
hintText node ✓ The hint content to display.
inputStyle object ✓ Override the inline-styles of the TextField's input element. When multiLine is false: define the style of the input element. When multiLine is true: define the style of the container of the textarea.
style object ✓ Override the inline-styles of the root element.
underlineDisabledStyle object ✓ Override the inline-styles of the TextField's underline element when disabled.
underlineFocusStyle object ✓ Override the inline-styles of the TextField's underline element when focussed.
underlineStyle object ✓ Override the inline-styles of the TextField's underline element.

* onRequestValue is required when strategy is 'warn' or 'ignore' and input is controlled in order to ensure correct strategy behaviour.

Strategies

strategy onError fired onRequestValue fired
'allow' ✓
'warn' ✓ ✓*
'ignore' ✓*

* Fired when input is controlled (value is provided). If input is not controlled it's value will be automaticlly corrected when it get's invalid number value.

Errors

'none'

Fired when input's value is valid (there is no error).

'required'

Fired when required prop is true and user leaves empty the input or it gets cleared.

'clean'

Fired when required prop is false and user leaves empty the input or it gets cleared.

'invalidSymbol'

Fired when user enters none special key which is different than -,.,[0-9].

'incompleteNumber'

Fired wehn user enters - as first char in the input or when user enters the first ..

'singleMinus'

Fired when user enters - not as a first char.

'singleFloatingPoint'

Fired when user enters . and there is already one entered.

'singleZero'

Fired when user has entered 0 as first char and enters a digit key.

'min'

Fired when user enters number less than min prop value.

'max'

Fired when user enters number greater than max prop value.