Fields

Fields make data editable. Alinea ships with a lot of field types but can easily be expanded with custom fields.

Configuration

While every field will have unique properties, there are a few properties that are generally available.

initialValue

Prefill the fields value.

hidden

Hide this field in the dashboard but keep its value intact.

readOnly

Mark field data as read-only.

help

Display a help text next to the fields label.

inline

Show a minimal version of the field. In most cases this will mean the input label will be hidden, and the label will show up as a placeholder instead.

width

Setting a width value will scale the fields width down, use a number between 0 and 1. This allows you to compose the dashboard UI better based on the content of the fields.

shared

Fields can be persisted over all languages if your content is localised by setting the shared option to true. When the entry is published the field data is copied to other locales. This is currently only supported on the root level, not on nested fields.

import {Config, Field} from 'alinea'

const Type = Config.type('Persist', {
  fields: {
    // Persist field data over all locales
    sharedField: Field.text('Shared text', {shared: true})
  }
})

required

The required option will make sure the field value is not empty when saving when set to true.

validate

The validate option can be used to validate the field value using a custom function. The function should return true if the value is valid, false if it is not valid and a string if it is not valid and a message should be shown to the user.

import {Config, Field} from 'alinea'

Field.text('Hello field', {
  help: 'This field only accepts "hello" as a value',
  validate(value) {
    if (value !== 'hello') return 'Only "hello" is allowed!'
  }
})

Conditional configuration

All field configuration can be adjusted based on the value of other fields. After defining fields in a Type a tracker function can be set up. The tracker function takes a reference to a field and a subscription function. In the subscription function field values can be retrieved and new options returned.

Example

import {Config, Field} from 'alinea'

const Example = Config.type('Conditional example', {
  fields: {
    textField: Field.text('Text field'),
    readOnly: Field.check('Make read-only'),
    hidden: Field.check('Hide field')
  }
})

Config.track.options(Example.textField, get => {
  const textField = get(Example.textField)
  const readOnly = get(Example.readOnly)
  const hidden = get(Example.hidden)
  return {
    readOnly, 
    hidden,
    help: `Text has ${textField.length} characters`
  }
})