Create your own Input view
Here you will see how to create your own Input view. When creating your own view inline, you will use the children render prop of the TextInputController.
Available prop getters from TextInputController
The TextInputController gives you access to the following prop getter functions:
getLabelProps
This prop getter generates the required props for the <label> element.
getInputProps
This prop getter generates the required props for the <input> element.
getErrorProps
This prop getter generates the required props for the container element of your displayed errors.
getContentHintProps
This prop getter generates the required props for the container element of your content hint text.
Other props from TextInputController
A number of other props are also exposed by the TextInputController. Refer to the smart controllers page to see how validators work:
showError
This boolean value will indicate to the view if an error should be shown. Normally, errors will only be shown after the first submit attempt unless overridden by the alwaysShowErrors prop of the Form component.
Use this to easily hide and show your error containers.
errorText
This value contains the current actual error message text. For valid or non-validated fields this will be empty. Otherwise it will contain the text from the first failing validator as specified on the TextInputController.
required
This boolean value indicates if the TextInputController has been marked as required. This can be handy to decide when to render required indicators.
Basic non-validated input
If you only need a label and an input you can write view code resembling this:
Note: that both the getLabelProps and the getInputProps prop getters can be called with an object that can override and / or enrich the props object returned by these prop getters. For example:
Required validated input
For validation, you can use the getErrorProps prop getter as well.
Note in the example above that the visual ( required ) text is marked with aria-hidden="true". This is because the TextInputController already marks the input as required with the aria-required property. Therefore you need to make sure that this is not read out twice by screen readers.
The prop getters will ensure that the error text field is linked to the input and that the input validity (aria-valid) is managed and read out by screen readers.
Input with a content hint
Should you want to render a content hint, please make use of the getContentHintProps prop getter:
The prop getter will ensure that the content hint is also linked to the <input> field so that screen readers are aware of this.
As shown above you can easily combine this with an error field, although a content hint can safely be rendered on its own.