ui/Group

Properties

childComponent •

StringComponent

Component type to repeat. This can be a React component or a string describing a DOM node (e.g. 'div')

children •

ArrayStringArrayObject

An array of data to be mapped onto the childComponent.

This supports two data types. If an array of strings is provided, the strings will be used in the generated childComponent as the content (i.e. passed as children). If an array of objects is provided, each object will be spread onto the generated childComponent with no interpretation. You'll be responsible for setting properties like disabled, className, and setting the content using children.

NOTE: When providing an array of objects be sure a unique key is assigned to each item. Read about keys for more information.

childProp

String

The property on each childComponent that receives the data in children

Default: 'children'

childSelect

String

The name of the event that triggers activation.

Default: 'onClick'

componentRef

ObjectFunction

Called with a reference to the root component.

When using ui/Group.Group, the ref prop is forwarded to this component as componentRef.

indexProp

String

The property on each childComponent that receives the index of the item

Default: 'data-index'

itemProps

Object

An object containing properties to be passed to each child.

onSelect

Function

Callback method to be invoked when an item is activated.

select

String

Selection mode for the group

• single - Allows for 0 or 1 item to be selected. The selected item may be deselected.

• radio - Allows for 0 or 1 item to be selected. The selected item may only be deselected by selecting another item.

• multiple - Allows 0 to n items to be selected. Each item may be selected or deselected.

Default: 'single'

selected

NumberArray

The index(es) of the currently activated item.

selectedEventProp

String

The key that will hold the value in the event passed to onSelect.

Default: 'data'

selectedProp

String

The name of the DOM property that represents the selected state.

Default: 'data-selected'