Composite

Provide 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.

Composite

API

useCompositeStore()
useCompositeContext()

<CompositeProvider>
  <Composite>
    <CompositeGroup>
      <CompositeGroupLabel />
      <CompositeRow>
        <CompositeHover />
        <CompositeItem />
        <CompositeSeparator />
      </CompositeRow>
    </CompositeGroup>
  </Composite>
  <CompositeTypeahead />
</CompositeProvider>
useCompositeStore()
useCompositeContext()

<CompositeProvider>
  <Composite>
    <CompositeGroup>
      <CompositeGroupLabel />
      <CompositeRow>
        <CompositeHover />
        <CompositeItem />
        <CompositeSeparator />
      </CompositeRow>
    </CompositeGroup>
  </Composite>
  <CompositeTypeahead />
</CompositeProvider>

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue