Agriculture Design System
Beta
Design System for the Export Service

Details

The Details component hides non-essential content unless a user explicitly chooses to view it.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/details';

Here are ways to make a Details component more accessible and inclusive for users of any ability or environment.

Be aware some users avoid detail links if they think they will lose their place in the flow if the page doesn’t open in a new tab.

Consider that content inside the Detail does not print with the rest of the page.

For general help with accessibility, go to the Web Content Accessibility Guidelines 2.1.