Tenon-UI Documentation

Code on GitHub

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.