Set the maximum length of a text field

[CarloBu]

I'm building a strict Website layout where I want to limit the maximum character length for the client.

By the example above, If the client puts an entire Shakespeare sentence in the title, it will break all the design. It would be great to limit the character count, but I miss this feature in the Sveltia CMS.

would it be possible to implement this feature using regex? For example, yaml could look like this:

  - name: test
    label: Test
    folder: src/content/test
    create: true
    fields:
      - label: Name
        name: name
        widget: string
        pattern: ['^.{0,70}$', 'Must not exceed 70 characters']  <- using regex

and the UI could show the current character count and maximum count - 65/70 like in the example in Sanity UI.

Going even further could be possible to implement the range: pattern: ['^.{20,70}$', 'Must not exceed 70 characters'] <- using regex and to show in the UI: 20//70 20/36/70 but I don't know at what scenario to use the min character limit.

[kyoshino]

I’m actually thinking about adding the minlength and maxlength options to the String and Text widgets, just like the minlength and maxlength HTML attributes, so that you don’t have to use a custom regex.

[CarloBu]

that would be even better for DX. 👍 you could give the nice UX addition by changing the color of the character counter to red when the pattern is not met, and to blue when the character count meets the requirements.

[kyoshino]

Yeah, I’m thinking about it. 😆

[kyoshino]

Just shipped v0.27.0 with the new options!

[CarloBu]

Wow! You did more work this evening than the entire Decap team did in a whole month. :)

[CarloBu]

this is so clean from DX side:

  - name: test
    label: Test
    folder: src/content/test
    create: true
    fields:
      - label: Description
        name: description
        widget: string
        minlength: 10
        maxlength: 70