Create your own Select view
Here you will see how to create your own Select view. When creating your own view inline, you will use the children render prop of the SelectController.
Available prop getters from SelectController
The SelectController gives you access to the following prop getter functions:
getLabelProps
This prop getter generates the required props for the <label> element.
getSelect
This prop getter generates the required props for the <select> 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 SelectController
A number of other props are also exposed by the SelectController. 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 if will contain the text from the first failing validator as specified on the SelectController.
required
This boolean value indicates if the SelectController has been marked as required. This can be handy to decide when to render required indicators.
Basic non-validated select
If you only need a label and a select you can write view code resembling this:
Note: that both the getLabelProps and the getSelectProps 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 select
For validation, you can make use of 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 SelectController already marks the select 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 select and that the select validity (aria-valid) is managed and read out by screen readers.
Select 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 <select> 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.