@bdt-component-library/text-field NPM

TextField Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of text fields according to style guide.

https://zeroheight.com/990ea04ab/p/98b6fb-input-fields

API

prop	type	required	default	explanation
className	string	no	""	Adds an optional classname to the text field
id	string	yes	no	Input id attr
value	string	no	no	Input value
defaultValue	string	no	no	Input default value
required	boolean	no	false	Determines if the input is required
name	string	no	no	Input name attr
inputRef	any	no	no	React ref for input
placeholder	string	no	no	Input placeholder text
autoComplete	enum("on", "off")	no	undefined	Input autoComplete attr
autoFocus	boolean	no	false	Input autoFocus attr
disabled	boolean	no	undefined	Determines input disabled state
helperText	string	no	no	Input helper text
onChange	function	no	undefined	Event handler for onchange events
onSearchCancel	function(e: event)	no	() => {}	Event handler for the cancel search click
type	enum("text", "date", "email", "password", "number", "search")	no	"text"	Determines text field type
hasSuccess	boolean	no	undefined	Determines success state
hasError	boolean	no	undefined	Determines error state (if the error array is not empty)
leadingIcon	React element OR false	no	false	Shows the icon in the leading position
trailingIcon	React element OR false	no	false	Shows the icon in the trailing position
size	number	no	50	Determines the value for the size attr
fullWidth	boolean	no	false	Sets full width, overriding size attr
min	number	no	undefined	Sets min attr for numerical inputs
max	number	no	undefined	Sets max attr for numerical inputs
noBottomMargin	boolean	no	false	Removes bottom margin of input for more control over formatting
step	number	no	1	Sets step attr for numerical inputs
testId	string	no	""	Allows an id to be added for testing purposes via the data-testid attr
minLength	number	no	undefined	Sets minLength attr for text inputs. Warning: this makes use of the native minLength input attr which depends on the utilization of the :invalid pseudo-class. Consider using onBlur for more complex validations with state.
maxLength	number	no	undefined	Sets maxLength attr for text inputs. Warning: this makes use of the native maxLength input attr. Consider using onBlur for more complex validations with state
onBlur	function(e: event)	no	() => {}	Event handler for onblur events
readOnly	boolean	no	false	Property that prevents the user from entering text in the input