New release: Conditional Fields

String

A schema type for strings and a selectable lists of strings.

A string field with a title and a description

Short string. Typically used for titles, names, and labels. If you need a basic multi-line string input, use the text. If you need text with markup and structured data, use block.

Properties

  • REQUIREDtypestring

    Required. Value must be set to string.

  • REQUIREDnamestring

    Required. The field name. This will be the key in the data record.

  • titlestring

    Human readable label for the field.

  • hiddenboolean | function

    If set to true, this field will be hidden in the studio. You can also return a callback function to use it as a conditional field.

  • readOnlyboolean

    If set to true, this field will not be editable in the content studio.

  • descriptionstring

    Short description to editors how the field is to be used.

  • initialValueInitialValueOrResolverFunction

    The initial value used when creating new values from this type. Can be either a literal string value or a resolver function that returns either a literal string value or a promise resolving to the initial string value.

Options

  • listarray

    A list of predefined values that the user can choose from. The array can either include string values ['sci-fi', 'western'] or objects [{title: 'Sci-Fi', value: 'sci-fi'}, ...]

  • layoutstring

    Controls how the items defined in the list option are presented. If set to 'radio' the list will render radio buttons. If set to 'dropdown' you'll get a dropdown menu instead. Default is dropdown.

  • directionstring

    Controls how radio buttons are lined up. Use direction: 'horizontal|vertical' to render radio buttons in a row or a column. Default is vertical. Will only take effect if the layout option is set to radio.

Validation

Learn more about validation
  • required()function

    Ensures that this field exists.

  • min(minLength)function

    Minimum length of string.

  • max(maxLength)function

    Maximum length of string.

  • length(exactLength)function

    Exact length of string.

  • uppercase()function

    All characters must be uppercase.

  • lowercase()function

    All characters must be lowercase.

  • regex(pattern[, options])function

    String must match the given pattern.

    options is an optional object, currently you can set options.name and options.invert.

    Providing a name will make the message more understandable to the user ("Does not match the <name>-pattern").

    Set invert to true in order to allow any value that does NOT match the pattern.

  • custom(fn)function

    Creates a custom validation rule.

Examples

Field configuration

{
  title: 'Title',
  name: 'title',
  type: 'string',
  description: 'Make it catchy',
  validation: Rule => Rule.max(120).warning(`A title shouldn't be more than 120 characters.`)
}

List of predefined strings

Input

{
  title: 'Genre',
  name: 'genre',
  type: 'string',
  options: {
    list: [
      {title: 'Sci-Fi', value: 'sci-fi'},
      {title: 'Western', value: 'western'}
    ], // <-- predefined values
    layout: 'radio' // <-- defaults to 'dropdown'
  }
}

Output

{
  "_type": "movie",
  "_id": "23407q-qwerqyt12",
  "genre": "sci-fi",
  ...
}

Protip

Want to make a multi-select for strings? Check out the Array schema type to see how you can build an array of strings, references, objects, and more.

Setting initial value for string fields

You can use initial values to preset string fields on document creation:

export default {
  name: 'post',
  type: 'document',
  title: 'Post',
  initialValue: {
    title: 'The initial title'
  },
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Title'
    }
  ]
}

Was this article helpful?