Form

Collection

A Collection allows users to provide multiple inputs for the same parameter. Each input appears on a different line.

View source
1
import {Checkbox, Collection, TextInput, useForm} from '@coveord/plasma-mantine';
2
3
export default () => {
4
const form = useForm({
5
initialValues: {
6
todoList: [
7
{name: 'wash the dishes', done: true},
8
{name: 'take out the trash', done: false},
9
{name: 'vacuum the floors', done: false},
10
],
11
},
12
});
13
14
return (
15
<Collection<{name: string; done: boolean}>
16
draggable
17
addLabel="Add task"
18
newItem={{name: '', done: false}}
19
{...form.getInputProps('todoList')}
20
>
21
{(task, index) => (
22
<>
23
<TextInput
24
// Autofocus is annoying when playing with the sandbox but you should have this on otherwise
25
// autoFocus
26
placeholder="Do something ..."
27
{...form.getInputProps(`todoList.${index}.name`)}
28
styles={{flex: 1}}
29
/>
30
<Checkbox {...form.getInputProps(`todoList.${index}.done`, {type: 'checkbox'})} />
31
</>
32
)}
33
</Collection>
34
);
35
};

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
defaultValueunknown[]
The initial items of the collection (for uncontrolled usage only)
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
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
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
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

No guidelines exist for Collection yet.

Create guidelines