elastic / elastic/eui

[EuiSelectable] Add invalid state

Open
#9,129 3 comments 0 reactions 0 assignees View on GitHub
breaking change stale-issue
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.

Image

**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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.