😎 Discover cool tips and tricks for customization in our next Developer Deep Dive virtual event - sign up now!

Help with composing a custom slug component in Sanity Studio v3

7 replies
Last updated: Feb 8, 2023
Hey Sanity community 👋I'm composing a custom slug component in a v3 Studio but coming up short
😢 hoping someone can help me.
The aim is to prefix the slug text input with a @sanity/ui badge that shows the path prefix, in this case '/posts/'.
Here's my
slug-input.tsx
code:

import { Badge, Inline } from '@sanity/ui'

export const SlugInput = (props: any) => {
    return (
        <Inline
            space={0}
            style={{
                width: '100%',
                backgroundColor: 'red' // 🕵️‍♂️ debug
            }}>
            <Badge
                tone='primary'
                style={{
                    borderTopRightRadius: 0,
                    borderBottomRightRadius: 0,
                    padding: '0.8em'
                }}>
                /posts/
            </Badge>
            {props.renderDefault({ ...props })}
        </Inline>
    )
}
Which kinda works, but gives me the ick feels &amp; doesn't take up the full width of the form (screenshot below).

Is there a better way to do this, is it possible to pass in an
icon
or
prefix
prop to the text input as listed on the @sanity/ui
TextInput
properties documentation ?
If I can't pass an icon/prefix component to the slug text input, how could I modify it to be full width?
Feb 7, 2023, 4:50 PM
Commenting to follow this thread, sorry I can't be helpful
Feb 7, 2023, 4:53 PM
No worries
user G
😂Here's hoping someone can point me in the right direction
🤞
Feb 7, 2023, 4:55 PM
I think you’ll want to use a Flex instead of Inline.
Feb 7, 2023, 9:34 PM
Thanks for chiming in
user M
, I tried a
Flex
initially but found it caused spacing issues - I’m AFK at the moment, will add a screenshot to demonstrate this later today.
Feb 8, 2023, 9:22 AM
I’m not exactly sure what you mean by passing an icon to the text input, but hopefully this solves the width issue?
import {Flex, Badge} from '@sanity/ui'

export const PrefixedSlugInput = (props) => {
  const { renderDefault } = props
  return (
    <Flex>
      <Badge
        tone="primary"
        style={{
          borderTopRightRadius: 0,
          borderBottomRightRadius: 0,
          padding: '0.8em',
          height: "100%"
        }}
      >
        /posts/
      </Badge>
      <div style={{ flex: 1 }}>{renderDefault(props)}</div>
    </Flex>
  )
}
Feb 8, 2023, 9:52 AM
Thanks
user P
, I’ll give this a try later and report back.Regarding the passing an icon/prefix to the text input, the
Sanity UI docs for the text input component list both icon &amp; prefix as available props for the input. I was wondering if this is the proper way to accomplish what I’m looking to do.
Feb 8, 2023, 10:19 AM
user P
Works like a charm, thank you sir 🙌
import { Badge, Box, Flex } from '@sanity/ui'

export const SlugInput = (props: any) => {
    return (
        <Flex>
            <Badge
                tone='primary'
                style={{
                    borderTopRightRadius: 0,
                    borderBottomRightRadius: 0,
                    padding: '0.8em'
                }}>
                /posts/
            </Badge>
            <Box style={{ flex: 1 }}>{props.renderDefault({ ...props })}</Box>
        </Flex>
    )
}
Feb 8, 2023, 4:10 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.

Was this answer helpful?