Change `tags` layout to be an autocomplete kind of deal.

4 replies
Last updated: Oct 13, 2020

Hey folks! πŸ‘‹ I feel like I should be able to figure this out on my own, but I'm stuck and would be grateful for any help πŸ™
I have a field to add tags to photos, nothing fancy:

      name: 'tags',
      title: 'Tags',
      type: 'array',
      description: 'Add tags that describe this photo.',
      of: [{type: 'string'}],
      options: {
        layout: 'tags',
        isHighlighted: true
      validation: Rule => Rule.required().min(2).error('At least 2 tags are required.')
What I'm trying to do is to change
layout to be an autocomplete kind of deal. When a person starts to type a tag, I want to check all existing tags that start with this input (this is the easy part) and display them as an autocomplete dropdown for this
field (this is the hard part). On Enter, the tag selected from the dropdown is added to the array, and the user can start typing next tag with the same autocomplete dropdown experience.
Any ideas or pointers? Thank you so very much!

Oct 2, 2020, 2:01 AM


user G
! So awesome to see you here!
Is there any chance someone could address this question? Thank you!!

Oct 2, 2020, 7:12 PM

oh hey Art!! nice to see you!! πŸ™Œ

Oct 2, 2020, 7:13 PM

let me look into this!

Oct 2, 2020, 7:13 PM

Figured it out! Not super elegant, but it proves the concept:

Oct 13, 2020, 2:21 AM Get the most out of your content is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Free to get started, pay-as-you-go on all plans.