Custom slug component with prefix badge not taking full width in Sanity v3

Good news - there's actually a cleaner way to do this! The @sanity/ui components support a pattern that works better than what you're currently doing.

Looking at your code, the main issue is that you're wrapping everything with an Inline component, which creates layout constraints. Instead, you should use a Flex container with proper flex properties. Here's a better approach based on the TextInput with Presets recipe:

import { Badge, Card, Flex, Text, TextInput } from '@sanity/ui'
import { useCallback } from 'react'

export const SlugInput = (props: any) => {
  const handleChange = useCallback(
    (event: React.FormEvent<HTMLInputElement>) => {
      props.elementProps.onChange(event)
    },
    [props.elementProps.onChange]
  )

  return (
    <Flex align="center" gap={1}>
      <Text size={1} muted>
        /posts/
      </Text>
      
      <Card flex={1}>
        <TextInput
          {...props.elementProps}
          onChange={handleChange}
        />
      </Card>
    </Flex>
  )
}

The key differences from your approach:

1. Use Flex instead of Inline with flex={1} on the Card wrapper - This ensures the input takes up the full available width
2. Use a Text component for the prefix instead of a Badge - This is more semantically correct and maintains better visual consistency with the input
3. Properly pass through elementProps - The elementProps object contains all the necessary props including id, value, onChange, etc.

If you really want to keep the Badge styling, you can do that too, but make sure the Card has flex={1}:

<Flex align="center" gap={1}>
  <Badge
    tone="primary"
    style={{
      borderTopRightRadius: 0,
      borderBottomRightRadius: 0,
      padding: '0.8em'
    }}>
    /posts/
  </Badge>
  
  <Card flex={1}>
    <TextInput {...props.elementProps} />
  </Card>
</Flex>

The flex={1} on the Card is the crucial part you were missing - it tells the Card to expand and fill the remaining space in the Flex container. This is why your input wasn't taking up the full width.

Regarding the prefix prop you mentioned from the @sanity/ui TextInput documentation - while TextInput does support various props, the pattern above using a Flex container is the recommended approach for custom input components in Sanity Studio v3, as it gives you more control over the layout and styling while maintaining proper integration with the form system.

For more examples of customizing text inputs with prefixes, check out the TextInput with Presets recipe which shows this exact pattern with additional features like preset buttons.