How to override string field height to display full content in Sanity?
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.
Show original thread8 replies
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.