number-field.md

Input Field Props Table

(For this tech design, the same principles would apply for a TextareaField and SelectField component)

Summary

Terra input field essentially wraps a terra-form-input inside of a terra-form-field component. It would contain first class parameters that map up to all the props for a field, and pass them into a field component. In addition, InputField would contain a prop inputAttrs that passes those props to the input element.

React Props

• error - Error message for when the input is invalid.
• errorIcon - Error Icon to display when the input is invalid.
• help - Help element to display with the input.
• hideRequired - Whether or not to hide the required indicator on the label.
• id - Id of the input. This will also supply label with the correct for attribute value.
• isInvalid - Whether or not the field is invalid.
• isInline - Whether or not the field is an inline field.
• isLabelHidden -Whether or not the label is visible. Use this props to hide a label while still creating it on the DOM for accessibility.
• label - The label of the form control children.
• labelAttrs - Attributes to attach to the label.
• required - Whether or not the field is required.
• showOptional - Whether or not to append the 'optional' label to a non-required field label.
• inputAttrs - Props to pass to the input attribute

Theming

No theming will be provided for this component. All styles should come from the associated field, and input passed into the field.

Questions

• We used to have other components such as NumberField, TextField that would set the type value on the input for the developer. However, there is discussion about just putting this on inputAttrs. Should we go that route?