Repeater

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
>
	{(item) => {
		const { title, toggledOption, updateData } = item;

		return (
			<RepeaterItem
				label={title ?? 'New item'}
				icon={icons.magicAlt}
			>
				<Toggle
					icon={icons.emptyCircle}
					label='Toggle me'
					checked={toggledOption}
					onChange={(value) => updateData({ toggledOption: value })}
				/>

				<InputField
					label='Title'
					type='text'
					value={title}
					onChange={(value) => updateData({ title: value })}
				/>
			</RepeaterItem>
		);
	}}
</Repeater>

Tip

Besides the item attributes, every item in the render function will also include a function for updating the current item (updateData), the current item's index (itemIndex), and a function for deleting the current item (deleteItem).

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Set default value for newly added items

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
	addDefaultItem={{
		title: 'My new item',
	}}
>
	{...}
</Repeater>

Prevent item deletion when below a certain count

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
	minItems={3}
>
	{...}
</Repeater>

Replace the default empty state

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
	emptyState={<span>Nothing to see here...</span>}
>
	{...}
</Repeater>

Don't show the empty state

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
	hideEmptyState
>
	{...}
</Repeater>

Prevent adding items

<Repeater
	label='Items'
	items={value}
	onChange={(value) => setValue(value)}
	addDisabled
>
	{...}
</Repeater>