Hello,
In different areas of the admin (theme editor, metafields…) input fields are presented inline (with the label on the left and the input on the right). This is quite useful to make long forms less intimadating.
While this layout can be replicated with React Polaris, it is impossible with web components. The main problem is that the input field is inside a shadow root and we don’t have the control over the ID of the actual input, so it’s not possible to associate a label with an input.
Ideally, though, I feel the various form fields should have a “labelPosition” that could be “inline” or “block” (default).
1 Like
Thank you for the feedback. I’ve shared this feature request with the appropriate team.
Currently we have a strong design opinion for labels in text inputs that they are above the input. We do not have plans to support inline labels.
If folks stumble on this conversation and want to share screenshots of the UI they are trying to build and rationale for why it is needed we might reconsider this decision.
Hello,
Here are various places where it is used in the admin:
I understand that this might not be something you want to add, but at least you should add a “input-id” attribute to all fields, to allows dev to link a label to an input. Right now the only way to achieve that is to use the <s-grid> component, but we loose the possibility to attach a label:
<s-grid gridTemplateColumns="200px auto">
<label for="??">Foo</label>
<s-text-field labelAccessibilityVisibility ="hidden" />
</s-grid>
1 Like
Yeah. That is interesting that the id is not linked to the input. I’ll pass this feedback onto the team. We currently don’t have plans to support this as we want developers to use inputs with current design limitations.
That’s a limitation of web components / shadow roots in general. One promising proposal to fix that is reference targets
1 Like
Could we at least have an input-id property that would reflect as the underlying input to be able to create custom labels ?
