Skip to main content
Form components are React components that render interactive inputs for different field types in Sanity Studio. Each component receives props based on the field’s schema type and handles user interaction, validation display, and value changes.

​
Core Input Components

​
StringInput

Renders a text input for string fields. Supports both basic text input and Portable Text mode.
​
value
string | undefined
Current value of the string field
​
schemaType
StringSchemaType
required
Schema type definition containing configuration like title, placeholder, and validation rules
​
onChange
(patch: FormPatch | FormPatch[] | PatchEvent) => void
required
Callback function to update the field value
​
readOnly
boolean
Whether the input should be read-only
​
validation
ValidationMarker[]
Array of validation errors and warnings to display
​
elementProps
PrimitiveInputElementProps
required
Props for the underlying HTML input element including id, ref, onChange, onFocus, onBlur
​
presence
FormNodePresence[]
Array of user presence indicators (who else is viewing/editing this field)
import {StringInput} from 'sanity'

// Used automatically by Sanity for string fields
// Custom usage in a custom input component:
function MyCustomInput(props: StringInputProps) {
  return <StringInput {...props} />
}

​
NumberInput

Renders a number input with validation and accessibility features.
​
value
number | undefined
Current numeric value
​
schemaType
NumberSchemaType
required
Schema type definition with number-specific validation rules
​
onChange
(patch: FormPatch | FormPatch[] | PatchEvent) => void
required
Callback to update the value
​
validationError
string | undefined
Aggregated validation error message
​
elementProps
PrimitiveInputElementProps
required
HTML input element props
import {NumberInput} from 'sanity'

// Automatically handles:
// - Input mode (numeric/decimal) based on validation rules
// - Preventing accidental wheel-based value changes
// - Min/max constraints from schema
Features:
  • Automatically sets inputMode="numeric" for mobile keyboards when min >= 0 and integer validation
  • Prevents accidental value changes on mouse wheel scroll
  • Respects min/max validation rules from schema

​
BooleanInput

Renders a checkbox or switch for boolean fields.
​
value
boolean | undefined
Current boolean value
​
schemaType
BooleanSchemaType
required
Schema type with optional options.layout for ‘checkbox’ or ‘switch’ (default)
​
onChange
(patch: FormPatch | FormPatch[] | PatchEvent) => void
required
Callback to update the value
​
readOnly
boolean
Whether the input is read-only
​
elementProps
PrimitiveInputElementProps
required
Element props including id and event handlers
import {defineField} from 'sanity'

// Schema configuration
defineField({
  name: 'published',
  type: 'boolean',
  options: {
    layout: 'checkbox' // or 'switch' (default)
  }
})
Layout Options:
  • switch (default): Toggle switch UI
  • checkbox: Traditional checkbox UI

​
ObjectInput

Renders fields for object types, with support for field groups and nested structures.
​
value
Record<string, any> | undefined
Current object value
​
schemaType
ObjectSchemaType
required
Schema type definition including fields array
​
members
ObjectFormNode['members']
required
Array of field members to render
​
groups
FormFieldGroup[]
required
Field groups for tabbed organization
​
onChange
(patch: FormPatch | FormPatch[] | PatchEvent) => void
required
Callback for value changes
​
onFieldGroupSelect
(groupName: string) => void
required
Callback when switching between field groups/tabs
​
renderInput
RenderInputCallback
required
Function to render nested input components
​
renderField
RenderFieldCallback
required
Function to render field wrappers with labels
import {ObjectInput} from 'sanity'

function MyObjectInput(props: ObjectInputProps) {
  return <ObjectInput {...props} />
}
Features:
  • Automatic field grouping with tabs
  • Support for columns option for grid layout
  • Collapsible field sets
  • Unknown field detection and warnings

​
ArrayInput

Renders array inputs with support for objects, primitives, and different layouts.
​
value
Array<any> | undefined
Current array value
​
schemaType
ArraySchemaType
required
Array schema type definition
​
members
ArrayFormNode['members']
required
Array of item members
​
onChange
(patch: FormPatch | FormPatch[] | PatchEvent) => void
required
Callback for changes
​
onItemAppend
(item: T) => void
required
Add item to end of array
​
onItemPrepend
(item: T) => void
required
Add item to beginning of array
​
onItemRemove
(itemKey: string) => void
required
Remove item by key
​
onItemMove
(event: ArrayInputMoveItemEvent) => void
required
Reorder array items
​
renderInput
RenderInputCallback
required
Function to render array item inputs
​
renderItem
RenderArrayOfObjectsItemCallback
required
Function to render array item wrappers
import {UniversalArrayInput} from 'sanity'

// UniversalArrayInput automatically delegates to:
// - ArrayOfObjectsInput (for arrays of objects)
// - ArrayOfPrimitivesInput (for arrays of strings/numbers/booleans)
// - ArrayOfOptionsInput (when options.list is defined)

function MyArrayInput(props: ArrayOfObjectsInputProps) {
  return <UniversalArrayInput {...props} />
}

​
Common Props

All input components share these common props:
​
id
string
required
Unique ID for the input element
​
path
Path
required
Field path in the document as an array of segments
​
level
number
required
Nesting level in the form (0 for root fields)
​
readOnly
boolean
Whether the field is read-only
​
presence
FormNodePresence[]
Real-time presence information for collaborative editing
​
validation
ValidationMarker[]
Validation errors, warnings, and info messages
​
renderDefault
(props: InputProps) => React.JSX.Element
required
Default render function for the input

​
Input Element Props

Primitive inputs (string, number, boolean) receive elementProps containing: 
interface PrimitiveInputElementProps {
  id: string
  value?: string
  readOnly: boolean
  placeholder?: string
  onChange: FormEventHandler
  onFocus: FocusEventHandler
  onBlur: FocusEventHandler
  ref: MutableRefObject<any>
  'aria-describedby': string | undefined
}
Complex inputs (object, array) receive: 
interface ComplexElementProps {
  id: string
  onFocus: FocusEventHandler
  onBlur: FocusEventHandler
  ref: MutableRefObject<any>
  'aria-describedby': string | undefined
}

​
FormInput Component

The FormInput component renders a specific field at a given path within an object or array input.
​
absolutePath
Path
required
Absolute path to the field to render
​
relativePath
Path
Relative path from the current input (alternative to absolutePath)
​
includeField
boolean
Whether to render the field wrapper with label (default: false)
​
includeItem
boolean
Whether to render the array item wrapper (default: false)
import {FormInput} from 'sanity'

// Render a nested field
function MyComponent(props: ObjectInputProps) {
  return (
    <FormInput
      {...props}
      relativePath={['author', 'name']}
      includeField
    />
  )
}

Build docs developers (and LLMs) love

Get started for freeTalk to us