Creating a custom input for slug autocomplete in Sanity Studio

I am trying to make a field that is a reference to any existing slug on the site, such that in studio the autocomplete combobox lists all slugs on the site. I thought would get me there, but the list is empty despite multiple slugs existing in the dataset. I guess slugs don't count as documents? Is this something I can do in a reasonably straight-forward manner?

Hey User! Unfortunately, you can only reference documents. You're correct, a slug field does not count as a document. Does it need to be a reference? Could you use a list of strings instead?

I can use whatever, the key feature is that I want autocomplete, and I want it as a listing of all the slugs available (even if we use a different type for the slugs). Is there a way to arbitrarily control the autofill contents (e.g. via a groq query) of an input that isn't building it from scratch?

Hi User. The dropdown preview should utilize the preview from each type you’re referencing, so what might work in your case is to reference all the types you want to pull in and then control the preview to have them show the slug.
If this is the reference field:


And each of those three document types have a preview like this:


Then the slug should be displayed in the reference’s dropdown. This might render your document lists differently than you want them, in which case you could put the slug as a subtitle (or the name/title as the subtitle).

Thanks for the suggestion, however that seems a rather large concession to make, at least for my purposes. If I were to get closer to the metal, is there any reason I can't create a custom input that queries the current dataset from within the input itself? That is to say, how do sanity studio UI components go about querying the dataset, if they can query it at all?

Thanks for the suggestion, however that seems a rather large concession to make, at least for my purposes. If I were to get closer to the metal, is there any reason I can't create a custom input that queries the current dataset from within the input itself? That is to say, how do sanity studio UI components go about querying the dataset, if they can query it at all?

You can absolutely do that. It would require implementing certain things yourself and maintaining them as they’re updated, but it’s no different than the studio components.

You can absolutely do that. It would require implementing certain things yourself and maintaining them as they’re updated, but it’s no different than the studio components.

that's good news, are there any special considerations regarding keeping the data fresh? Like can I just query the dataset once in some kind of react hook and then rely on that to run when the input is rendered?

The component is using RxJS Observables. Here’s the link to the ReferenceInput component .

is that to say that I can use those same observables in my custom component, and that's in place of the need to fetch the data? I don't see where the data is queried

I’m not completely sure, but I can try to find out a bit more when the team is back in next week.

thank you

Here’s an example where User built a custom component to reference documents in a different dataset. It’s a different use case than what you’re after and doesn’t use Sanity UI, but it showcases what it takes to create this type of custom component and is still completely functional.

Ok thanks, I think that covers all the moving pieces.