Skip to content

[EuiFormRow] With difficult components #3218

@myasonik

Description

@myasonik

EuiFormRow passes down the id an input element should take on to wire up EuiFormRow's <label> correctly.

But there are several cases where this breaks down:

  • [EuiFormRow] doesn't always wire up the label and input #3037 describes a case where if the form control isn't built as expected by EuiFormRow and so the id never makes it to the <input />
  • Another issue is what to do if there are multiple <input /> elements (like dual input Range Sliders because you can't have multiple ids on a page
  • Another issue, that's been somewhat hastily solved by the hasChildLabel prop on EuiFormRow, is with wrapped <input /> elements that already have an applied label
  • And, the impetus for making this issue, for the case of a searchable EuiSelectable, the <input /> needs the passed in id but also an associated element (a ul in this case) needs a reverse aria-describedby set to the label's id.

@chandlerprall suggested that this might be solved by somehow using React's context to do all this...

Kind of related to #2493

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions