TextField for Fender React UI Kit
Description
A compound component used to render input fields. It will also perform field validation..
Installation and Usage
yarn add @fenderdigital/react-text-field --save
import TextField from '@fenderdigital/react-text-field';
Props
-
autoComplete
- enables / disabled this browser feature for input fields. -
children
- renders any child elements. -
containerStyles
- configurable tachyon classes. -
dataId
- data id value. mainly, for automation testing. -
disabled
- option to disable the input field. -
errorMessage
- error messaging that is rendered byFieldError
. -
initialValue
- optional input field value. -
value
- Use to set input field value. Must be paired withonChange
ifTextField
is to be updated after -
inputStyles
- configurable tachyon classes for the input field element. -
onChange
-onChange
callback -
onBlur
-onBlur
callback -
onFocus
-onFocus
callback -
onClick
-onFocus
callback -
placeholder
- text (or html) for the input field's placeholder attribute. -
type
- input field type
propName | propType | defaultValue | isRequired |
---|---|---|---|
autoComplete | string | off | - |
children | node | null | - |
containerStyles | string | '' | - |
dataId | string | text-field | - |
disabled | boolean | false | - |
errorMessage | string | null | - |
initialValue | string | '' | - |
value | string | '' | - |
inputStyles | string | '' | - |
onChange | func | () => {} | - |
onBlur | func | null | - |
onFocus | func | () => {} | - |
onClick | func | () => {} | - |
placeholder | node | '' | - |
type | string | text | - |
Development
Check the Monorepo README for development documentation.