/

All things Composite

Components

CompositeProvide a single tab stop on the page and navigate through the focusable descendants with arrow keys. This abstract component is based on the WAI-ARIA Composite Role.

API Reference

useCompositeContextReturns the composite store from the nearest composite container.

useCompositeStoreCreates a composite store.

CompositeRenders a composite widget.

CompositeGroupRenders a group element for composite items.

CompositeGroupLabelRenders a label in a composite group. This component must be wrapped with CompositeGroup so the aria-labelledby prop is properly set on the composite group element.

CompositeHoverRenders an element in a composite widget that receives focus on mouse move and loses focus to the composite base element on mouse leave. This should be combined with the CompositeItem component, the useCompositeItem hook or any component/hook that uses them underneath.

CompositeItemRenders a composite item.

CompositeProviderProvides a composite store to CompositeItem components.

CompositeRowRenders a composite row. Wrapping CompositeItem elements within CompositeRow will create a two-dimensional composite widget, such as a grid.

CompositeSeparatorRenders a separator for composite items.

CompositeTypeaheadRenders a component that adds typeahead functionality to composite components.