Search component

[sang-yeo]

We are planning to add a Widget search feature in Studio. It's similar to Chrome search feature. Could you recommend which Paste component I need to use for this feature?

Basic interaction will be

1. A user clicks the search icon from Canvas Controller
2. Search input(?) pops up (Which component should I use? I planning to use an input component without label)
   Thanks!

[serifluous]

Thanks, @sang-yeo ! Could you share a screenshot, paper sketch, or link of what you're trying to achieve?

Off the top of my head, a constraint to consider is that you won't be able to turn the Button component (the search icon) into an Input on click. But what you can do is have a very short Input that expands on focus (like the search in console nav) OR open a modal or other dialog that has an input.

Input is likely the right component to use here. But if you need typeahead/autocomplete (like the search in console nav or on the Paste doc site), you'll want to use Combobox—we don't have a Sketch symbol for it yet, but you can use the Select symbol for now and pair it with the Menu symbol.

Search is generally the only place where we'd say not including a label is ok, but it really depends on a few things:

1. Can the UI actually allow for it? If you can place a label, it helps make it that much clearer to all users.
2. If you decide that it doesn't, take a look at the accessibility information on form labels and work with your engineering team to make sure a non-visible form label can be read by screen readers. Another way to do this is include a search icon prefix on the form field and give the icon a descriptive title that tells a user what the input is for.

[sang-yeo]

@serifluous

[sang-yeo]

2nd concept looks like this click here

[serifluous]

The first concept won't be doable since it runs into the constraint I mentioned about not being able to turn a Button into an Input.

The second concept should be doable. There's definitely room for a visible label in the popover, too.

[sang-yeo]

Thanks for answering! is your suggestion adding a visible label and removing the placeholder?

[serifluous]

Yep, that would work for Concept 2.

We discussed a little more in the team, and if you were interested in getting Concept 1 to work, what you could do is have the search icon button always visible, and it would toggle whether the search input is hidden or visible. So instead of Button --> Input, instead you'd do Button --> Button + Input.

[SiTaggart]

One thing that will affect which input control you use will be the search behavior itself. Can you describe what happens when I type in the search input @sang-yeo?

[SiTaggart]

Not exactly like that, no. You can use the input suffix to add a clear icon though https://paste.twilio.design/components/combobox#combobox-with-add-ons-prefix-suffix-text-or-icons

[sang-yeo]

Great. I applied your suggestion to the mockhere. Thanks again for detailed feedback

[serifluous]

Looks good 👍 .

If you still end up doing some exploration on the clear icon, you can also take a look at the code sandbox link on the answer to discussion #605 for some options.

[aayushpi]

@sang-yeo Recommend setting the initial focus on the popover to the combobox instead of the close, since that is what the user is optimistically trying to reach.

[sang-yeo]

@aayushpi will do. Thank you! This is really helpful.