Feature Request

When using our input elements (ino-input, ino-select, ino-checkbox, ...) I want to be able to use them in a form with the relevant functionalities.

Required

Add the required attribute to all input elements and check if an invalid state is already implemented

• ino-autocomplete
• ino-checkbox
• ino-datepicker
• ino-input
• ino-input-file
• ino-radio(-group)
• ino-range
• ino-select
• ino-switch
• ino-textarea

open a new issue, if there is no visual indicator for an invalid state

Focus & Blur

For some validation mechanisms, it is necessary to trigger the blur & focus methods of the input components.

• ino-autocomplete
• ino-checkbox
• ino-datepicker
• ino-input
• ino-input-file
• ino-radio(-group)
• ino-range
• ino-select
• ino-switch
• ino-textarea

Validation States & Message

As is the case for the ino-input, we should provide properties to mark the component as invalid from the outside, following our controlled components concept. Furthermore, it is necessary to provide a way to show custom error messages as well.

• ino-autocomplete
• ino-checkbox
• ino-datepicker
• ino-input
• ino-input-file
• ino-radio(-group)
• ino-range
• ino-select
• ino-switch
• ino-textarea

Summary

In the end, every input component should have the following methods/properties (names are WIP):

• required
• setFocus()
• setBlur()
• error
• helper (maybe rename to helperText?)
• helperPersistent
• helperValidation
• showLabelHint

for an explanation of each property, have a look at the API of the ino-input element