Inputs and badges

[jkiga]

Hi again!

This is a little related to my other discussion I posted, but thought this could be one on its own.

I understand there isn't a pattern for inputs to have a badges inside and it would be difficult code it there. I have been talking to my engineering team and we were wondering if it would be within best practices to have the badge on top of the input.

For my scenario, the badge is tightly coupled with the information displayed in the read only input. The badge relates to the Messaging Service we want the customer to choose and based on our testing, the recommended badge highly influenced the user's decision. We are iterating on the designs from testing and incorporating the badge is slightly different now. I did some explorations of where the badge could display outside the input, but I'm afraid it might lose its intended context.

This is what I was hoping/trying to achieve:

Here are some other explorations I am considering (left side is first choice after above):

I would love to hear feedback or other approaches! Thank you so much.

[gloriliale]

Hi @jkiga! Great question, thanks for starting a new thread on it!

First, wanted to confirm that it just isn't possible to put a Badge inside of Input. We use the native html input element for our Input component and the only thing that it takes as a value is a string.

I definitely understand what you mean by not wanting the context of "Recommended" to get lost. I'll gather the team's thoughts on your examples (thanks for providing them!) and get back to you real soon.

[gloriliale]

Hi @jkiga!

The best option here would be to add "Recommended" as text before or after the message service name in the input value itself. I've provided a few screenshots below of what this could look like.

The reason we recommend (ha) this is because it not only keeps the context visually, but it connects the "Recommended" designation to the service name in an accessible way. In contrast, it'd be difficult for someone using a screen reader to know that a conditionally rendered Badge outside the input box is even related to the input value. Let me know if this is helpful!

[jkiga]

Hi @gloriliale!

Thank you so much for replying back and taking the time to give me a recommendation (haha). I did play around with this design and took it to my critpod.

The feedback there was the read only input for the "Select Existing Messaging Service" option was almost there, but it felt it was portrayed in the wrong component. I know this might be headed in a different direction than original posted discussion, but the look and feel that was suggested might align more with uploading a file. Is there an existing pattern for uploading files that I could extract?

Thank you for all your help!

[gloriliale]

Hi @jkiga! I think this hearkens back to your original design with a button and read-only input next to each other. In that case my suggestion would be (and I think we might have touched on this in office hours) to pull this part out of the radio group and have it be a separate section that is labeled are required, pictured below.

[jkiga]

Awesome, thank you so much @gloriliale for replying and confirming. I will explore this option!