Skip to main content

String Picker

Overview​

For all plain string fields, the default behavior is to simply define the type to be a string.

Configuration​

In order to perform specific validation (or even custom ones) this picker leverages the React JSON Schema validation. So, for example, you could add an email string field that needs to be validated as an email by simply configuring it like:

email:
  title: Contact email
  type: string
  format: email
  description: Point of contact, it could be the owner or a distribution list, but must be reliable and responsive

For limit the number of characters for a specific string field, maxLength prop must be added under ui:option.

textArea:
  title: Note
  type: string
  description: Text area field
  ui:options:
    maxLength: 10

Instead, if you need a textArea field, you could add multiline and rows properties under ui:options

textArea:
  title: Note
  type: string
  description: Text area field
  ui:options:
    multiline: true
    rows: 2

If you need a code-oriented string field, use the codeblock widget. It renders the field as a code editor, useful for structured text such as SQL, YAML, JSON, or scripts. The ui:options.language option allows you to define the language for syntax highlight, defaults to plaintext. You can also modify the height via the ui:options.height option.

query:
  title: SQL query
  type: string
  description: Query used to read data from the source system
  format: codeblock
  ui:options:
    language: sql
    height: 400

Most languages are supported as part of ui:options.language, some of the most common are yaml, json, sql, python, html, md (Markdown), and more.

Enums​

Instead of letting the user fill out the information, you can give some predefined options to choose from, using the enum property. Optionally you can also show the user the label of the enum fields instead of the values, by using the enumNames property.

myEnumField:
  title: Enum field
  type: string
  enum:
    - Earth
    - Jupiter
    - Saturn
  enumNames:
    - Earth - our planet
    - Jupiter - the largest planet in our solar system
    - A cool planet with a ring - Saturn!