Custom Number Select input component for Sanity.io

customNumber.js

import CustomNumberSelect from './customNumberSelect'

export default {
  name: 'sizes',
  type: 'number',
  inputComponent: CustomNumber,
  options: {
    list: [
      {title: 'xsmall', value: 1},
      {title: 'small', value: 2},
      {title: 'medium', value: 4}
    ]
  }
}

customNumberSelect.js

import React, { forwardRef } from 'react
import FormField from 'part:@sanity/components/formfields/default'
import DefaultSelect from 'part:@sanity/components/selects/default'
import PatchEvent, {set, unset} from 'part:@sanity/form-builder/patch-event'

const customNumberSelect = props => {
  const setNumber = (item) => {
    const {value} = item
    const {onChange} = props
    onChange(PatchEvent.from(value === 'unset' ? unset() : set(Number(value))))
  }
  const {type} = props
  const {title, description, options} = type
  const unsetItem = {title: '', value: 'unset'}
  const currentValue = options.list.find(({value}) => value === props.value)
  return (<FormField label={title} description={description} ref={ref}>
    <DefaultSelect
      label={title}
      placeholder={'Select value'}
      onChange={setNumber}
      items={[unsetItem, ...options.list]}
      value={currentValue}
    />
  </FormField>)
}

export default customNumberSelect