Announcing the Better Fields plugin for Payload

Over the last 9 months we've accumulated some improved fields in our arsenal for PayloadCMS and this is not the first time that we've published a plugin so we'll get right into it!

The Better Fields plugin is here to bring you improved UX in the admin panel with some very specific and custom fields and hey if these don't quite fit your needs at least the source code is there for inspiration. We're also always open to PRs and requests.

Slug

Source

1import { CollectionConfig } from 'payload/types'
2import { SlugField } from '@nouance/payload-better-fields-plugin'
3
4const Examples: CollectionConfig = {
5  slug: 'examples',
6  admin: {
7    useAsTitle: 'title',
8  },
9  fields: [
10    {
11      name: 'title',
12      type: 'text',
13    },
14    ...SlugField(['title'], undefined, {
15      admin: {
16        position: 'sidebar',
17      },
18    }),
19  ],
20}

typescript

The most common field type we anticipate most people will want to use

checkbox for manually editing the slug
updates in real time
can combine multiple fields
supports a callback for more customisation
uses slugify under the hood
works with nested values

Combo

Source

1import { CollectionConfig } from 'payload/types'
2import { ComboField } from '@nouance/payload-better-fields-plugin'
3
4const Examples: CollectionConfig = {
5  slug: 'examples',
6  admin: {
7    useAsTitle: 'fullName',
8  },
9  fields: [
10    {
11      type: 'row',
12      fields: [
13        {
14          name: 'firstName',
15          type: 'text',
16        },
17        {
18          name: 'lastName',
19          type: 'text',
20        },
21      ],
22    },
23    ...ComboField(['firstName', 'lastName'], { name: 'fullName' }),
24  ],
25}

typescript

The combo field is a simplified version of the slug, without a slugify based callback it shares similar features and gives more power to the user.

Number

Source

1import { CollectionConfig } from 'payload/types'
2import { NumberField } from '@nouance/payload-better-fields-plugin'
3
4const Examples: CollectionConfig = {
5  slug: 'examples',
6  admin: {
7    useAsTitle: 'fullName',
8  },
9  fields: [
10    {
11      name: 'title',
12      type: 'text',
13    },
14    ...NumberField(
15          {
16            prefix: '$ ',
17            thousandSeparator: ',',
18            decimalScale: 2,
19            fixedDecimalScale: true,
20          },
21          {
22            name: 'price',
23            required: true,
24          },
25        ),
26  ],
27}

typescript

Allows you to have a visually formatted number instead, based on the react-number-format.

Pattern

Source

1import { CollectionConfig } from 'payload/types'
2import { PatternField } from '@nouance/payload-better-fields-plugin'
3
4const Examples: CollectionConfig = {
5  slug: 'examples',
6  admin: {
7    useAsTitle: 'fullName',
8  },
9  fields: [
10    {
11      name: 'title',
12      type: 'text',
13    },
14    ...PatternField(
15      {
16        format: '+1 (###) #### ###',
17        prefix: '% ',
18        allowEmptyFormatting: true,
19        mask: '_',
20      },
21      {
22        name: 'telephone',
23        type: 'text',
24        required: false,
25        admin: {
26          placeholder: '% 20',
27        },
28      },
29    ),
30  ],
31}

typescript

Similar to the number field, brings you formatted strings from the same react-number-format package.

Colour Text

Source

1import { CollectionConfig } from 'payload/types'
2import { ColourTextField } from '@nouance/payload-better-fields-plugin'
3
4const Examples: CollectionConfig = {
5  slug: 'examples',
6  admin: {
7    useAsTitle: 'title',
8  },
9  fields: [
10    {
11      name: 'title',
12      type: 'text',
13    },
14    ...ColourTextField({
15      name: 'colour',
16    }),
17  ],
18}
19
20export default Examples

typescript

This is using the validate-color package under the hood to validate the colour values provided, making it easier for admins and editors to add their own colours in.

Want more?

Open a PR or send us a request and we'll see about adding your field in as well. We appreciate any shares or feedback on Twitter or via our contact form over here :)