Fields

The field array in your collection configuration is used to define which inputs should appear when creating or modifying content in that specific collection. You can specify rules to validate or transform this input as well as which widget should be used to modify this input.

Validation rules

Behind the scenes Imput uses the excellent react-hook-form for input validation. On each field object you can define rules. The shape of your rules object accepts all kinds of validation options specified by the react-hook-form register API.

Example: Require a field

In case you want to ensure content can't be created or saved without a specific input you can force it to be required. This would look something like this:

{
  fields: [
    {
      label: 'Name',
      name: 'name',
      widget: 'string',
      rules: {
        required: 'This field is required',
      },
    }`
  ]
}

Widgets

Widgets are what Imput calls different types of input you can use for fields.

💡

Imput doesn't yet support custom widgets, however they are on the roadmap. Hopefully the available widgets will cover most use-cases.

String

The string widget uses a simple text input which is then translated into a string.

Name: string
UI: A text input
Options:
- default: accepts a string and defaults to an empty string
- label: the descriptive label associated with the input
- rules: the input's validation rules
- hidden: whether we want the input to be displayed in the editor
Example:

{
  label: 'Name',
  name: 'name',
  widget: 'string',
  rules: {
    required: 'This field is required',
  },
}

Arrays of widgets

Certain widgets also accept a multiple option. If set to to true the Imput editor will allow users to add multiple inputs of the type selected and they'll be saved to your markdown as an array.

For example the following config:

{
  fields: [
    {
      label: 'Ingredients',
      name: 'ingredients',
      multiple: true, 
      widget: 'string',
    }`
  ]
}

Will result in:

Environments Slug