Form

Collection

A Collection allows users to provide an array of items of the same type.
These will have to be done by next week
1
import {Checkbox, Collection, TextInput, useForm} from '@coveord/plasma-mantine';
2
3
const Demo = () => {
4
const form = useForm({
5
validateInputOnChange: true,
6
initialValues: {
7
todoList: [
8
{name: 'wash the dishes', done: true},
9
{name: 'take out the trash', done: false},
10
{name: 'vacuum the floors', done: false},
11
],
12
},
13
validate: {
14
todoList: (value) => (value.length < 2 ? `Don't be lazy, add just ${2 - value.length} more tasks` : null),
15
},
16
});
17
18
return (
19
<Collection<{name: string; done: boolean}>
20
draggable
21
addLabel="Add task"
22
description="These will have to be done by next week"
23
label="List of tasks"
24
newItem={{name: '', done: false}}
25
{...form.getInputProps('todoList')}
26
>
27
{(_task, index) => (
28
<>
29
<TextInput
30
// Autofocus is annoying when playing with the sandbox but you should have this on otherwise
31
// autoFocus
32
placeholder="Do something ..."
33
{...form.getInputProps(`todoList.${index}.name`)}
34
/>
35
<Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
36
</>
37
)}
38
</Collection>
39
);
40
};
41
export default Demo;

Props

NameTypeDefaultDescription
childrenrequired(item: unknown, index: number) => ReactNode
A render function called for each item passed in the `value` prop.
  • itemThe current item's value
  • indexThe current item's index
newItemrequiredunknown
The default value each new item should have
addDisabledTooltipstring'There is already an empty item'
The tooltip text displayed when hovering over the disabled add item button
addLabelstring"Add item"
The label of the add item button
allowAdd(values: unknown[]) => boolean
Function that determines if the add item button should be enabled given the current items of the collection. The button is always enabled if this props remains undefined
  • valuesThe current items of the collection
descriptionReactNode
Input description, displayed after label
descriptionPropsRecord<string, any>
Props spread to description element
disabledbooleanfalse
Whether the collection is disabled, or in other words in read only mode
draggablebooleanfalse
Whether the collection should have drag and drop behavior enabled
errorReactNode
Displays error message after input
errorPropsRecord<string, any>
Props spread to error element
getItemId(originalItem: unknown) => string
Defines how each item is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense. This method is required when using this component with ReactHookForm.
  • originalItemThe original item
labelReactNode
Input label, displayed before input
labelPropsRecord<string, any>
Props spread to label element
onChange(value: unknown[]) => void
Function called whenever the value needs to be updated
  • valueThe whole list of items after the change
onFocus() => void
Unused, has no effect
onInsertItem(value: unknown, index: number) => void
Function that gets called when a new item needs to be added to the collection
  • valueThe the value of the item to insert
  • indexThe index of the new item to insert
onRemoveItem(itemIndex: number) => void
Function called after an item is removed from the collection using the remove button
  • itemIndexThe index of the item that was removed
onReorderItem(payload: ReorderPayload) => void
Function that gets called whenever a collection item needs to be reordered
  • payloadThe origin and destination index of the item to reorder
requiredbooleanfalse
Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
spacingMantineNumberSize'xs'
The spacing between the colleciton items
valueunknown[][]
The list of items to display inside the collection
withAsteriskboolean
Determines whether required asterisk should be rendered, overrides required prop, does not add required attribute to the input

Examples

Collection with ReactHookForm
These will have to be done by next week
1
import {Checkbox, Collection, TextInput} from '@coveord/plasma-mantine';
2
import {Controller, useForm, useFieldArray} from 'react-hook-form';
3
4
const Demo = () => {
5
const {control} = useForm({
6
defaultValues: {
7
todoList: [
8
{name: 'wash the dishes', done: true},
9
{name: 'take out the trash', done: false},
10
{name: 'vacuum the floors', done: false},
11
],
12
},
13
mode: 'onBlur',
14
});
15
16
const itemId = 'internal-id';
17
const {fields, insert, move, remove} = useFieldArray({control, keyName: itemId, name: 'todoList'});
18
19
return (
20
<Controller
21
control={control}
22
name="todoList"
23
render={({fieldState: {error}}) => (
24
<Collection<{name: string; done: boolean; 'internal-id'?: string}>
25
draggable
26
addLabel="Add task"
27
description="These will have to be done by next week"
28
label="List of tasks"
29
newItem={{name: '', done: false}}
30
error={error?.message}
31
onReorderItem={({from, to}) => {
32
move(from, to);
33
}}
34
onRemoveItem={remove}
35
onInsertItem={(value, index: number) => {
36
insert(index, value);
37
}}
38
value={fields}
39
getItemId={(item) => item[itemId]}
40
>
41
{(_task, index) => (
42
<>
43
<Controller
44
control={control}
45
name={`todoList.${index}.name` as const}
46
render={({field, fieldState: {error: errorFieldName}}) => (
47
<TextInput
48
{...field}
49
error={errorFieldName?.message}
50
placeholder="Do something ..."
51
/>
52
)}
53
/>
54
<Controller
55
control={control}
56
name={`todoList.${index}.done` as const}
57
render={({field: {value, ...restField}, fieldState: {error: errorFieldDone}}) => (
58
<Checkbox checked={value} {...restField} error={errorFieldDone?.message} />
59
)}
60
/>
61
</>
62
)}
63
</Collection>
64
)}
65
/>
66
);
67
};
68
export default Demo;

No guidelines exist for Collection yet.

Create guidelines