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

View source


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
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
The initial items of the collection (for uncontrolled usage only)
Whether the collection is disabled, or in other words in read only mode
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
Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item
The spacing between the colleciton items
The list of items to display inside the collection

No guidelines exist for Collection yet.

Create guidelines