Field

[seanmalbert]

Field component

Related Issues:

#3128

Prop Documentation

Just from this first pass, two things are clear:

1. getValue, setValue, and prepend are not applicable/usable for all field types.
2. We have a lot of props that are just passed directly to the input component which instead could be handled through the inputProps prop. Those that are separated out include defaultValue, onDrop, onPaste, onChange, disabled, describedBy, hidden, and dataTestID.

error?: boolean - Adds css class 'error' (red outline to field) , sets aria-invalid to true, and renders error message if provided

errorMessage?: string - Text rendered in red below field when error occurs

className?: string - css classes passed to component parent div, in addition to 'field' css class

controlClassName?: string - css classes passed to direct parent div of input component, in addition to 'control' css class

caps?: boolean - capitalizes field label by adding 'field-label--caps' css class to labelClasses array

primary?: boolean - sets label color to primary color by adding tailwind's 'text-primary' class to labelClasses array

readerOnly?: boolean - makes field only visible to screen-readers by adding tailwind's 'sr-only' class to labelClasses array

type?: string

• handles the field type (number, currency (subset of number field type), radio, checkbox), defaulted to text
• broadly adds specific classes to various parts of the field but logic is somewhat varied
• use 1: if not 'checkbox' add 'control' class to controlClasses array
• use 2: if currency, add {step: 0.01, onBlur: formatValue} where formatValue is a custom number formatter
• use 3: if passed in as currency, set field type to number after use 2 applied
• use 4: if radio type, make label text semi-bold
• use 5: if radio or checkbox type render the label after the element but if not, render it before
• use 6: passed to input element

id?: string - used for htmlFor field on label and id for input element

name: string - used for htmlFor field on label and id for input component if props.is not defined. If it is, it is only used for the name field for input element

note?: string | JSX.Element - grayed-out helper text, rendered above label if radio or checkbox and below, if not

subNote?: string - grayed-out helper text, rendered below field itself for all types

label?: string - text which all labelClasses are applied to, conditionally rendered by input based on type (see above)

defaultValue?: string | number - starting value in field input, passed directly to input element

onDrop?: (e: React.DragEvent<HTMLElement>) => boolean - custom function to handle when field is dropped, passed directly to input element

onPaste?: (e: React.ClipboardEvent) => boolean - custom function to handle when field is pasted into, passed directly to input element

onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void - custom function to handle when field input is changed, passed directly to input element

placeholder?: string -text grayed out in background of input to guide users, doesn't register as field value

register?: UseFormMethods["register"] -react hook form method, allows for validation

validation?: RegisterOptions -used with 'register' to set validation rules on specific fields

disabled?: boolean - doesn't allow any input, passed directly to input element

prepend?: string - displayed at beginning of input field
NOTE only seems to work with text input, and with $ or 2 character or less strings.
Area for improvement

inputProps?: Record<string, unknown> - custom props added directly to the input element

describedBy?: string - sets aria-describedby field on input element

getValues?: UseFormMethods["getValues"] - react hook form helper, used to format currency values and not used for other types
Area for improvement

setValue?: UseFormMethods["setValue"] - react hook form helper, used to format currency values and not used for other types
Area for improvement

dataTestId?: string - used for identifying field component in testing, passed directly to input element

hidden?: boolean - hides input itself but leaves other element such as labeling, passed directly to input element