The hidden Attribute
The native hidden attribute is guaranteed to work on any NDS element, even ones styled with flex or grid display. The markup below ships four tags, and the one carrying hidden never renders
<span class="nds-tag" data-status="success"><span class="nds-label">Active</span></span>
<span class="nds-tag" data-status="info"><span class="nds-label">Beta</span></span>
<span class="nds-tag" data-status="error" hidden><span class="nds-label">Deprecated</span></span>
<span class="nds-tag nds-gray"><span class="nds-label">Archived</span></span>
Responsive Hiding with data-hidden
Stamp data-hidden on any element to hide it only inside a named viewport range: sm (600px and below), md (601 to 960px), lg (961 to 1280px). Space-separate tokens to span ranges. Resize the window to watch each tag drop out of its own band
<span class="nds-tag" data-status="error" data-hidden="sm"><span class="nds-label">sm</span></span>
<span class="nds-tag" data-status="warning" data-hidden="md"><span class="nds-label">md</span></span>
<span class="nds-tag" data-status="info" data-hidden="lg"><span class="nds-label">lg</span></span>
<span class="nds-tag" data-status="neutral" data-hidden="sm md"><span class="nds-label">sm md</span></span>
<span class="nds-tag" data-status="success"><span class="nds-label">always visible</span></span>
Keep It Readable to Screen Readers
Add the sr token to any data-hidden value and the element is hidden visually but stays in the accessibility tree. Use it on button labels that collapse to icon-only, so the control never loses its accessible name. Resize below 600px: the label disappears, the button keeps its width padding, and screen readers still announce "Search"
<button class="nds-btn nds-neutral" type="button">
<i class="nds-icon nds-hgi-search-01" aria-hidden="true"></i>
<span class="nds-label" data-hidden="sm sr">Search</span>
</button>
Built-in Features
Elements with the hidden attribute stay hidden even when a flex, grid, or utility display rule targets them.
Each data-hidden token hides an element only inside its own range, so a mid-width gap never leaks into small screens.
Space-separate tokens to span ranges, like data-hidden="sm md" for everything below the large breakpoint.
The sr token hides an element visually while assistive technology keeps announcing it, so icon-only collapses never lose their name.
Usage Guidelines
Best Practices
- Use the
hiddenattribute for state your JS toggles (panels, menus, wizard steps). It wins over any display value, so no extra CSS is needed - Use
data-hiddenfor chrome that has no place at some widths (topbar widgets, secondary metadata) instead of writing one-off media queries - Think of the split as:
hiddenis state ("not right now"),data-hiddenis viewport ("not at this width"). Both can sit on one element, and either condition hides it - Combine tokens to span ranges:
data-hidden="sm md"hides up to 960px,data-hidden="md lg"keeps an element for the smallest and very wide screens only data-hidden="lg"covers 961 to 1280px, so the element shows again on wider screens. There is no token for widths above 1280px- The
hiddenattribute and plaindata-hiddenremove content from screen readers too. When assistive technology should still announce it, add thesrtoken:data-hidden="sm sr" - Hiding a label with
srdoes not restyle the control: a button keeps its text padding rather than becoming a square icon button. Sizing stays the component's job - Do not hide primary actions on small screens. Collapse them into a Dropmenu so the capability stays reachable
- Hidden elements still download their images and iframes. Remove heavy content from the markup rather than hiding it
Attributes
| Attribute | Description |
|---|---|
hidden | Native attribute, any element. Removes it from rendering and assistive technology, and wins over any display value |
data-hidden | Band-exact responsive hiding. Tokens: sm (600px and below), md (601 to 960px), lg (961 to 1280px). Space-separate to combine. Add sr to hide visually but keep the element readable to screen readers |