Changing a string field to a text field in Sanity.io

8 replies
Last updated: Apr 23, 2020
Hi there! How should I do, having a long long
string
to override the
string
standard container height so that I can see the whole string content.
AI Update

You can override the default height of a string input field in Sanity Studio by creating a custom input component. Here's how:

Quick solution using custom input component:

In your schema, add a custom input component that renders a taller text area:

import { set, unset } from 'sanity'

const TallStringInput = (props) => {
  const { value, onChange, elementProps } = props
  
  return (
    <textarea
      {...elementProps}
      value={value || ''}
      onChange={(event) => {
        const inputValue = event.currentTarget.value
        onChange(inputValue ? set(inputValue) : unset())
      }}
      rows={10} // Adjust this to your desired height
      style={{ width: '100%', minHeight: '200px' }}
    />
  )
}

// In your schema
{
  name: 'myLongString',
  type: 'string',
  components: {
    input: TallStringInput
  }
}

Better solution with proper Studio integration:

For a more polished approach that maintains Studio styling and accessibility, use Sanity UI components:

import { TextArea } from '@sanity/ui'
import { set, unset } from 'sanity'

const TallStringInput = (props) => {
  const { value, onChange, elementProps } = props
  
  return (
    <TextArea
      {...elementProps}
      value={value || ''}
      onChange={(event) => {
        const inputValue = event.currentTarget.value
        onChange(inputValue ? set(inputValue) : unset())
      }}
      rows={10}
      style={{ minHeight: '200px' }}
    />
  )
}

Alternative: Use the text type instead

If you're just looking for a multi-line input, Sanity has a built-in text type that renders as a textarea by default:

{
  name: 'myLongString',
  type: 'text', // Instead of 'string'
  rows: 10 // Optional: set default height
}

The text type is designed for longer content and automatically gives you a textarea with adjustable height. This is often the simplest solution if you don't need other customizations.

Hi François! The easiest thing to do in this case is to make it a
text
type field instead where you will have access to the
rows
property to set the number of rows you’d like to show (default: 10). Bear in mind that you’d have to migrate existing content though when making a schema type change.
For more info on the text type:
https://www.sanity.io/docs/text-type
Thanks!I'm going to do that!
Is there a way to migrate existing content easily?
I am learning from scratch, I therefore makes lots of mistakes, if there is one, I'll like to know...
Actually, there shouldn’t be any issues with changing a
string
type field to a
text
type field because the actual data type (still a string) doesn’t change in this case 👍
Thanks!
For other cases, are some tools existing?
Yes, normally you would export, reshape and import your data or, better if you don’t want to interrupt the work of your editors, use a migration script. There’s more information and an example on this page: https://www.sanity.io/docs/migrating-data . There are more examples out there though, so feel free to ask if you ever run into this 🙂
Wah! Thank you☆I'm going to have a look at this.
Have a very good day!
And you too, François! 👍

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Was this answer helpful?