feat(FormField): display multiple errors

Adds the `errors` and `maxErrors` properties to the FormField component which
allows to display multiple errors. The `maxErrors` prop is used to limit
the number of errors displayed and defaults to 1 for backward
compatibility.

This change is compatible with the `Form` component error's too.

Resolves #2389
This commit is contained in:
Romain Hamel
2025-06-14 17:19:16 +02:00
parent 59c26ec123
commit 5829aebe7d
4 changed files with 103 additions and 6 deletions

View File

@@ -68,6 +68,10 @@ describe('FormField', () => {
['with required', { props: { label: 'Username', required: true } }],
['with help', { props: { help: 'Username must be unique' } }],
['with error', { props: { error: 'Username is already taken' } }],
['with multiple errors', { props: { errors: ['Username is already taken', 'This should not be visible'] } }],
['with maxErrors', { props: { maxErrors: 2, errors: ['Username is already taken', 'This should be visible'] } }],
['with maxErrors negative', { props: { maxErrors: -1, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
['with maxErrors false', { props: { maxErrors: false, errors: ['Username is already taken', 'This should be visible', 'This should be visible'] } }],
['with hint', { props: { hint: 'Use letters, numbers, and special characters' } }],
...sizes.map((size: string) => [`with size ${size}`, { props: { label: 'Username', description: 'Enter your username', size } }]),
['with as', { props: { as: 'section' } }],