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 by FieldError.
• initialValue - optional input field value.
• value - Use to set input field value. Must be paired with onChange if TextField 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.