[EuiSelectable] Add invalid state
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Requestor**
Myself.
**Problem Statement**
To my knowledge, the `EuiSelectable` does not have any existing prop or capability to be displayed in an invalid state (i.e. `isInvalid`), other than the `errorMessage` prop. Ideally, we'd be able to display this component in an invalid state, similar to how we can for other form elements in EUI.
**Proposed Solution**
For context, imagine a situation where the user is presented with a web form that includes an `EuiSelectable` component. The component has no default selection made. If the user attempts to click the submit button without having made a selection, I'd like to show the `EuiSelectable` in an invalid state similar to our other form components to direct the user's attention to the area of need, including a red outline and some optional help text.
**Use Case**
I'm currently working on a multi-step form flow for the Streams product where such an invalid state would be useful. See the attached screenshot.
**Value / Impact**
This is important for usability and accessibility to be able to direct a user's attention to the part of a form that requires changes to be made (the `EuiSelectable` in this case).
**Urgency**
I don't think this is terribly urgent, nor will it hard block me on anything (as alternatives can be pursued, such as disabling the submit button).
**Do alternatives or workarounds exist?**
Yes, disabling the submit button until a selection is made, as mentioned above.
**Related code or customizations**
I'm not personally aware of such a workaround or customization being implemented in Kibana or Cloud UI, though that doesn't mean they don't exist.
Contributor guide
Assessment
This issue has not been assessed yet.