Border with input prepend/append

[bjarnef]

Which exact UI Library version are you using? For example: 1.0.1 - don't just write v1.

1.14.0

Bug summary

When using prepend and append I personally prefer these to be outside input itself, but wrapped in a "group".
https://getbootstrap.com/docs/5.3/forms/input-group/#basic-example

E.g. in embed it collides a bit with button look:

I think something like this would be better.

Perhaps a prefix and suffix could be used to insert (mostly icon) inside input:
http://shoelace.style/components/input/#prefix-and-suffix-icons

E.g. sometimes one wants in a datepicker to have a button triggering datepicker - or icon in input itself.
https://primevue.org/datepicker/#icon

Specifics

No response

Steps to reproduce

Expected result / actual result

No response

[nielslyngsoe]

Hi @bjarnef

The purpose of the append and prepend feature is to give the ability to add things within. Add something that belongs within the input, and is affected/part of the validation state of the input.

For the date picker example shared above, I would put it this way:
The date picker modal and the button to open it are also invalid in the case of the selected date being invalid. Therefore, the red border hinting that the area of the invalid input should cover the whole gestalt.

So, from that perspective, I would disagree. Instead, I will propose: If you're looking to add other elements close to an input. Example element that would not be invalid in the case of the input being invalid, then style the elements to they get positioned against each other.

From an architectural point it is not the responsibility of a component to enable other components to be placed close to it, that is as the sentence describes, an external responsibility. In the current world view, one that must be done by the specific implementation.

Regarding the names then that is a detail, they have these names now, whether prefix and suffix would have been more correct, I'm not sure of, but it is surely breaking and is at the given moment not relevant enough to change. :-)

With that I will close off this issue, thanks for your perspective and the interest in making the UI Library great and intuative :-)

[bjarnef]

@nielslyngsoe yes, that's what some other libraries call prefix and suffix.

But what a mainly noticed different from other libraries is button inside input instead of an addon next to inout, at the outline may not always have sufficient constract depending on look of button.