Sanity Character Count component for string and text

components\CharacterCount.module.css

.textInput {
  border: 1.5px solid #e1e8fa;
  border-radius: 3px;
  color: #6f7fb3;
  font-size: 12px;
  font-weight: bold;
  padding: 1px 3px;

  @media (prefers-color-scheme: dark) {
    border-color: #575f73;
  }
}

.textInputWarning {
  border-color: #fbf4ce;
  color: #8b8775;

  @media (prefers-color-scheme: dark) {
    border-color: #575134;
  }
}

components\CharacterCount.tsx

import styles from './CharacterCount.module.css';
import type { StringCountInputProps, TextCountInputProps } from '../types';

function getMinMax(
  schemaType: StringCountInputProps['schemaType'] | TextCountInputProps['schemaType'],
) {
  return {
    min: schemaType.options?.minLength,
    max: schemaType.options?.maxLength,
  };
}

export default function CharacterCount(
  props: StringCountInputProps | TextCountInputProps,
) {
  const { value = '', schemaType } = props;
  const { min, max } = getMinMax(schemaType);

  let characters: string | undefined = undefined;
  const classes = [styles.textInput];

  if (min ?? max) {
    characters = `${value.length}`;
    if (max) {
      characters = `${characters} / ${max}`;
    }
  }

  if ((min && value.length < min) ?? (max && value.length > max)) {
    classes.push(styles.textInputWarning);
  }

  return <span className={classes.join(' ')}>{characters ?? ''}</span>;
}

components\StringInput.tsx

import { type ChangeEvent, useCallback } from 'react';
import { Stack, Text, TextInput } from '@sanity/ui';
import { set, unset } from 'sanity';
import CharacterCount from './CharacterCount';
import type { StringCountInputProps } from '../types';

export const StringInput = (props: StringCountInputProps) => {
  const { elementProps, onChange, value = '' } = props;

  const handleChange = useCallback(
    (event: ChangeEvent<HTMLInputElement>) => {
      const nextValue = event.currentTarget.value;
      onChange(nextValue ? set(nextValue) : unset());
    },
    [onChange],
  );

  return (
    <Stack space={2}>
      <TextInput {...elementProps} onChange={handleChange} value={value} />
      <Text style={{ marginLeft: 'auto' }}>
        <CharacterCount {...props} />
      </Text>
    </Stack>
  );
};

components\TextInput.tsx

import { type ChangeEvent, useCallback } from 'react';
import { Stack, Text, TextArea } from '@sanity/ui';
import { set, unset } from 'sanity';
import CharacterCount from './CharacterCount';
import type { TextCountInputProps } from '../types';

export const TextInput = (props: TextCountInputProps) => {
  const { elementProps, onChange, value = '' } = props;

  const handleChange = useCallback(
    (event: ChangeEvent<HTMLTextAreaElement>) => {
      const nextValue = event.currentTarget.value;
      onChange(nextValue ? set(nextValue) : unset());
    },
    [onChange],
  );

  return (
    <Stack space={2}>
      <TextArea
        {...elementProps}
        onChange={handleChange}
        value={value}
        style={{ resize: 'vertical' }}
      />
      <Text style={{ marginLeft: 'auto' }}>
        <CharacterCount {...props} />
      </Text>
    </Stack>
  );
};

types\index.ts

import type {
  StringDefinition,
  TextDefinition,
  StringInputProps,
  StringSchemaType,
  TextInputProps,
} from 'sanity';

/**
 * You can also pass any of the properties of Sanity object types described here: https://www.sanity.io/docs/string-type
 */
export interface StringCountSchemaDefinition extends StringDefinition {
  options?: StringSchemaType['options'] & CharCountOptions;
}

/**
 * You can also pass any of the properties of Sanity object types described here: https://www.sanity.io/docs/text-type
 */
export interface TextCountSchemaDefinition extends TextDefinition {
  options?: TextDefinition['options'] & CharCountOptions;
}

export interface CharCountOptions {
  minLength?: number;
  maxLength?: number;
}

export interface StringCountInputProps extends StringInputProps {
  schemaType: StringInputProps['schemaType'] & {
    options?: StringInputProps['schemaType']['options'] & CharCountOptions;
  };
}

export interface TextCountInputProps extends TextInputProps {
  schemaType: TextInputProps['schemaType'] & {
    options?: TextInputProps['schemaType']['options'] & CharCountOptions;
  };
}

utilities\defineCharCountField.ts

import { StringInput } from '../components/StringInput';
import { TextInput } from '../components/TextInput';
import { StringCountSchemaDefinition, TextCountSchemaDefinition } from '../types';

export function defineStringCountField(
  schemaTypeDefinition: Omit<StringCountSchemaDefinition, 'type'>,
): StringCountSchemaDefinition {
  return {
    ...schemaTypeDefinition,
    type: 'string',
    components: { input: StringInput },
  };
}

export function defineTextCountField(
  schemaTypeDefinition: Omit<TextCountSchemaDefinition, 'type'>,
): TextCountSchemaDefinition {
  return {
    ...schemaTypeDefinition,
    type: 'text',
    components: { input: TextInput },
  };
}

Can be used like

const settings = {
  seo: {
    titleMinLengthRecommend: 15,
    titleMaxLengthRecommend: 70,
    descriptionMinLengthRecommend: 15,
    descriptionMaxLengthRecommend: 160,
  },
};

defineField({
  title: 'Title for search & social sharing (meta title)',
  name: 'metaTitle',
  type: 'string'
  description:
    'Make it as enticing as possible to capture users in Google + social feeds. If it matches the Site Title, only one will be displayed to prevent duplication.',
  components: { input: StringInput },
  options: {
    minLength: settings.seo.titleMinLengthRecommend,
    maxLength: settings.seo.titleMaxLengthRecommend,
  },
  validation: (rule) => [
    rule
      .min(settings.seo.titleMinLengthRecommend)
      .warning(`Title should be at least ${settings.seo.titleMinLengthRecommend} characters long for maximum effect.`),
    rule
      .max(settings.seo.titleMaxLengthRecommend)
      .warning(`Title should be less than ${settings.seo.titleMaxLengthRecommend} characters long for maximum effect.`),
  ],
}),