Spinner inside input

[tkrotoff]

v4.2 features spinner. They can be embedded inside a button: https://getbootstrap.com/docs/4.3/components/spinners/#buttons

Would be nice to be able to also embed a spinner inside an input.

Sometimes you have fields that perform async actions, a spinner inside the input would give feedback to the user (something is pending).

Example: https://github.com/tkrotoff/bootstrap-spinner

[mdo]

Inputs cannot have elements within them, so we're outta luck on that. For now, no plans to implement this or a variation of it. We'll keep it in mind though!

[serzhenko]

@mdo but maybe it's possible to emulate this feature using technique similar to input groups? If text appending is possible, why can't we append a spinner?

[mdo]

Lemme see if I can come up with something...

[andzejsp]

any progress on this one?

[theodorejb]

Bulma allows adding a spinner to form controls (input, textarea, and select) by adding an is-loading class to the control: https://bulma.io/documentation/form/input/#states. It would be nice if Bootstrap supported something similar.

[bjornharvold]

Came across this issue as we are also working with async validators.

It's basically 3rd stage of a lifecycle where the form field is neither valid or invalid but "pending" (Using Angular form field terminology) / validating. Could even be good enough to have a non-spinning spinner in text-secondary color.

The Angular way would have to be to create a custom directive that appends a spinner within an input group everywhere where there this async validation.

[fhughes90]

Yes, giving feedback to the user based on certain async functions would be great.

[coliff]

There's a draft PR from @mdo for this: https://github.com/twbs/bootstrap/pull/31667 Would love to see it added too :-)