@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
211 lines (186 loc) • 6.44 kB
Markdown
---
title: 'TermDefinition'
description: 'TermDefinition renders a compact, inline explanation for a word or phrase with an anchor-style trigger button.'
version: 10.104.0
generatedAt: 2026-04-17T18:46:12.002Z
checksum: 9dc75b9f1552ed9694083681def91b6897c9b323bcf260ef4fc1e0197d370d9e
---
```tsx
import { TermDefinition } from '@dnb/eufemia'
```
TermDefinition renders a compact, inline explanation for a word or phrase with an anchor-style trigger button.
- [Source code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-eufemia/src/components/term-definition)
- [Docs code](https://github.com/dnbexperience/eufemia/tree/main/packages/dnb-design-system-portal/src/docs/uilib/components/term-definition)
To ensure that the TermDefinition component is accessible, it uses semantic HTML elements and appropriate ARIA attributes.
- All content inside the TermDefinition can be selected when it is open.
- Clicking anywhere outside the TermDefinition, or pressing Escape, closes it.
- The trigger looks like an [Anchor](/uilib/components/anchor) but is actually a semantic button.
- It is fully focusable and works with keyboard navigation.
- The trigger is aligned to the left side of the word for better readability (not centered).
- Screen readers read the word (its children) first and then announce that the trigger can be activated to show more information.
- When the TermDefinition opens, it receives focus and the screen reader announces its content.
- When it closes, focus returns to the trigger so keyboard users keep their place in the document.
- The close button is placed last in the tab order, making it easy for keyboard users to reach after reading the content.
- It also closes automatically when focus moves outside the TermDefinition or when the Escape key is pressed.
- The trigger shows the hover style of an [Anchor](/uilib/components/anchor) when open.
## Root Element (React Portal)
The TermDefinition component uses [PortalRoot](/uilib/components/portal-root) internally to render its explanation content. See the [PortalRoot documentation](/uilib/components/portal-root) for information on how to control where the portal content appears in the DOM.
## Demos
### Basic
```tsx
render(
<P>
A text with{' '}
<TermDefinition content="Unusual words are words that are not commonly used or that many people might not know the meaning of.">
unusual words (yeah)
</TermDefinition>{' '}
lorem ipsum dolor sit amet, consectetur adipiscing elit.
</P>
)
```
```tsx
render(
<Form.Handler>
<Form.Card>
<Form.SubHeading>My form</Form.SubHeading>
<Field.Email
help={{
title: 'Email help',
content: (
<>
Enter your{' '}
<TermDefinition content="Email is a method of exchanging messages between people using electronic devices.">
email
</TermDefinition>{' '}
address
</>
),
}}
/>
<Field.Boolean
variant="radio"
label="Consent"
help={{
title: 'Data processing help',
content: (
<>
I consent to{' '}
<TermDefinition content="Data processing refers to any operation performed on personal data, such as collection, storage, use, or disclosure.">
data processing
</TermDefinition>
</>
),
}}
/>
</Form.Card>
</Form.Handler>
)
```
```tsx
render(
<Form.Handler>
<Form.Card>
<Form.SubHeading>My form</Form.SubHeading>
<Field.Email
label={
<>
Enter your{' '}
<TermDefinition content="Email is a method of exchanging messages between people using electronic devices.">
email
</TermDefinition>{' '}
address
</>
}
/>
<Field.Boolean
variant="checkbox"
label={
<>
I consent to{' '}
<TermDefinition content="Data processing refers to any operation performed on personal data, such as collection, storage, use, or disclosure.">
data processing
</TermDefinition>
</>
}
/>
</Form.Card>
</Form.Handler>
)
```
```tsx
<Lead>
As a lead with{' '}
<TermDefinition content="Unusual words are words that are not commonly used or that many people might not know the meaning of.">
unusual words (yeah)
</TermDefinition>
.
</Lead>
<H2 top={false}>
As a heading with{' '}
<TermDefinition content="Unusual words are words that are not commonly used or that many people might not know the meaning of.">
unusual words (yeah)
</TermDefinition>
.
</H2>
```
## Properties
```json
{
"props": {
"children": {
"doc": "Term shown as the trigger. Typically a short word or phrase.",
"type": "React.ReactNode",
"status": "required"
},
"content": {
"doc": "Definition text that will be displayed inside.",
"type": "React.ReactNode",
"status": "required"
},
"placement": {
"doc": "Defines the preferred popover placement relative to the trigger.",
"type": ["top", "right", "bottom", "left"],
"defaultValue": "bottom",
"status": "optional"
},
"[Space](/uilib/layout/space/properties)": {
"doc": "Spacing properties like `left` or `right` are supported.",
"type": ["string", "object"],
"status": "optional"
}
}
}
```
```json
{
"locales": ["da-DK", "en-GB", "nb-NO", "sv-SE"],
"entries": {
"TermDefinition.closeButtonTitle": {
"nb-NO": "Lukk ordforklaring",
"en-GB": "Close definition",
"sv-SE": "Stäng ordförklaring",
"da-DK": "Luk ordforklaring"
},
"TermDefinition.closeTriggerTitle": {
"nb-NO": "Klikk for å lukke ordforklaring",
"en-GB": "Click to close definition",
"sv-SE": "Klicka för att stänga ordförklaring",
"da-DK": "Klik for at lukke ordforklaring"
},
"TermDefinition.openTriggerTitle": {
"nb-NO": "Klikk for å åpne ordforklaring",
"en-GB": "Click to open definition",
"sv-SE": "Klicka för att öppna ordförklaring",
"da-DK": "Klik for at åbne ordforklaring"
}
}
}
```