Standard NerdWallet tabbed UI component. Tabs can be controlled or uncontrolled to modify which tab the user is currently viewing.
Initial Tab Open
aria-labelledby must be provided for the component to be accessible. The label will be read by a screen reader as part of the announcement of the tabs when focus initially lands inside the tab group. It should give a high-level description of what the tabs as a whole contain or represent.
aria-labelis provided, it must be a string that describes the tabs as a whole.
aria-labelledbyis provided, it must be the ID of another element that describes the tabs as a whole.
As an example, the
<MarketplaceProductCard> component contains tabs with additional information about the product. So, an appropriate
aria-label value could be "More information about this product".
The component will automatically generate IDs for internal components using the
useId() hook from
@nerdwallet/react-accessibility . If manual control over the IDs is needed, there are two ways to control them:
baseIdprop is provided, this will be used instead of an automatically-generated ID from
If the individual items in the
tabsarray prop have an
idproperty, that will be used for the individual tabs.
In both cases, care should be taken to ensure that the IDs are globally unique on the page the component is rendered on.
By default, the
<Tabs> component manages its own state. If you need explicit control over the component's state or want to react to state changes, you can use the
<ControlledTabs> component in conjunction with the
useTabState hook. This is a thin wrapper around Reakit's
useTabState hook that adds APIs based on tab index.
The component has legacy (non-Bedrock) event instrumentation built in to it. Tracking is opt-in.