TextField

A wrapper for Text Input component with extra functionality like floating placeholder

Extends: TextInput
(meaning you can pass the super component's props as well).

Supported modifiers: Typography.
Read more about modifiers here.

PROPS

namedescriptiontypedefault
floatingPlaceholdershould placeholder have floating behaviorbool
floatingPlaceholderColorfloating placeholder color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}union
helperTextThis text will appear as a placeholder when the textInput becomes focused, only when passing floatingPlaceholder as well (NOT for expandable textInputs)string
hideUnderlinehide text input underline, by default falsebool
underlineColorunderline color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}union
disabledColorthe color of all text when the input is disabled (if undefined will not apply color)string
centeredshould text input be align to centerbool
errorinput error message, should be empty if no error existsstring
enableErrorsshould the input component support error messagesbooltrue
expandableshould the input expand to another text area modalbool
renderExpandableInputRender custom expandable input (requires expandable to be true)func
renderExpandableallow custom rendering of expandable content when clicking on the input (useful for pickers) accept props and state as params, ex. (props, state) => {...} use toggleExpandableModal(false) method to toggle off the expandable contentfunc
onToggleExpandableModalCallback for the modal toggle. Pass with renderExpandable to control the modal togglefunc
topBarPropsThe picker modal top bar propsshape
transformertransform function executed on value and return transformed valuefunc
titleFixed title that will displayed above the input (note: floatingPlaceholder MUST be 'false')string
titleColorThe title's color as a string or object of states, ex. {default: 'black', error: 'red', focus: 'blue'}union
titleStyleAdditional styles for the title (not including 'color')union
showCharacterCountershould the input display a character counter (only when passing 'maxLength')bool
floatOnFocusshould float the placeholer when focused (instead of when typing)bool
useTopErrorsshould the errors be displayed at the topbool
rightIconSourceIcon asset source for showing on the right side, appropriate for dropdown icon and suchunion
placeholderTextColorColors.dark40

LIVE EXAMPLE

CODE SAMPLE

See example here.