Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Adding clickable links in the description property for a field in Slack.

6 replies
Last updated: Mar 12, 2024
Small question: is it possible to add a clickable link in the 
description
property for a field?
Mar 12, 2024, 6:24 PM
In my experience descriptions remain plain text but if I want a dynamic or not just pure text description I'll leave it empty in the schema and make a "custom input component" that doesn't change the input at all but simply wraps it so I can inject my own React markup styled similarly to look the same way.
It seems like the request is becoming slightly more common so maybe suggest it in
ideas-and-feedback
Mar 12, 2024, 6:59 PM
You used to be able to pass a function that returned JSX to the description field, but I don’t think it works anymore 😞
Mar 12, 2024, 7:04 PM
NVM, still possible. You just have to invoke the function that you pass:
      description: (() => (
        <button onClick={() => window.alert('HI')}>Click here for a surprise!</button>
      ))(),

Mar 12, 2024, 7:10 PM
Thank you both!
user M
’s example did the trick. We spun up a reusable 
HtmlDescription
component:
export const HtmlDescription = ({ children }: { children: React.ReactNode }) => {
  return children || ''
}
and using it on the 
description
properties when needed (schema file needed to be 
.jsx
or 
.tsx

description:
  <HtmlDescription>
    This is a description with a <a href="/">link</a>.
  </HtmlDescription>
Mar 12, 2024, 7:26 PM
Nice! Thanks for the tip
user M
Mar 12, 2024, 7:52 PM
Super nice.
Mar 12, 2024, 8:13 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?