@dnb/eufemia

--- title: 'Components' version: 11.8.2 generatedAt: 2026-07-03T14:39:19.216Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Components DNB Eufemia components are ready-to-use, styled, and custom-built HTML elements. ## [Overview](/uilib/components/overview/) All components and fragments grouped by practical usage categories. ## [Accordion](/uilib/components/accordion/) Use Accordion to let people open and close sections of related content. ## [Anchor (Text Link)](/uilib/components/anchor/) Use Anchor to take people to another page, section, or website. ## [AriaLive](/uilib/components/aria-live/) Use AriaLive to announce page changes to screen reader users. ## [Autocomplete](/uilib/components/autocomplete/) Use Autocomplete to help people find and choose from matching suggestions as they type. ## [Avatar](/uilib/components/avatar/) Use Avatar to make a person, company, or profile easier to recognize. ## [Badge](/uilib/components/badge/) Use Badge to highlight new, unread, or important information. ## [Breadcrumb](/uilib/components/breadcrumb/) Use Breadcrumb to show where someone is and let them move back up the path. ## [Button](/uilib/components/button/) Use Button when people need to start, confirm, or submit an action. ## [Card](/uilib/components/card/) Use Card to group related content in a clear, separated area. ## [Checkbox](/uilib/components/checkbox/) Use Checkbox when people can turn one or more options on or off. ## [CopyOnClick](/uilib/components/copy-on-click/) Use CopyOnClick when people should copy text by clicking it. ## [CountryFlag](/uilib/components/country-flag/) Use CountryFlag to show a country by its flag from an ISO country code. ## [DateFormat](/uilib/components/date-format/) Use DateFormat to show dates in the correct DNB format. ## [DatePicker](/uilib/components/date-picker/) Use DatePicker when people need to choose one date or a date range. ## [Dialog](/uilib/components/dialog/) Use Dialog when people need to make a choice or read an important message before continuing. ## [Drawer](/uilib/components/drawer/) Use Drawer to show extra content in a panel that slides in from the side. ## [Dropdown](/uilib/components/dropdown/) Use Dropdown when people need to choose one option from a list. ## [Filter](/uilib/components/filter/) Use Filter to help people narrow down a list or data set. ## [FormLabel](/uilib/components/form-label/) Use FormLabel to name an input, control, or form-related field. ## [FormStatus (Messageboxes)](/uilib/components/form-status/) Use FormStatus to show validation errors, warnings, or messages near a form. ## [GlobalError (404)](/uilib/components/global-error/) Use GlobalError to show a clear 404 or 500 error page. ## [GlobalStatus](/uilib/components/global-status/) Use GlobalStatus to show important page-level messages or a summary of form errors. ## [Heading (auto level)](/uilib/components/heading/) Use Heading to create accessible page headings with the correct level. ## [HeightAnimation](/uilib/components/height-animation/) Use HeightAnimation to animate content as it opens or closes. ## [HelpButton](/uilib/components/help-button/) Use HelpButton when a short explanation should be available next to a label or control. ## [Icon](/uilib/components/icon/) Use Icon to render and size an icon in line with Eufemia styling. ## [InfinityScroller](/uilib/components/pagination/infinity-scroller/) Use InfinityScroller to load more content automatically as people scroll. ## [InfoCard](/uilib/components/info-card/) Use InfoCard to show helpful information, tips, or guidance in a highlighted area. ## [Input](/uilib/components/input/) Use Input when people need to enter a short line of text. ## [InputMasked](/uilib/components/input-masked/) Use InputMasked when people must enter text in a fixed format. ## [List](/uilib/components/list/) Use List to show rows of related content, with optional actions or navigation. ## [ListFormat](/uilib/components/list-format/) Use ListFormat to show lists of values in the correct DNB format. ## [Logo](/uilib/components/logo/) Use Logo to show the DNB logo with the correct SVG and styling. ## [Menu](/uilib/components/menu/) Use Menu when people need to choose from a small list of actions or links. ## [Modal](/uilib/components/modal/) Use Modal when people must focus on one task or message before returning to the page. ## [NumberFormat](/uilib/components/number-format/) Use NumberFormat to show numbers in the correct DNB format. ## [Pagination](/uilib/components/pagination/) Use Pagination to split long content into pages or load more content as people move through it. ## [Popover](/uilib/components/popover/) Use Popover to show a small floating panel connected to a trigger. ## [PortalRoot](/uilib/components/portal-root/) Use PortalRoot to render floating content outside the normal page structure. ## [ProgressIndicator](/uilib/components/progress-indicator/) Use ProgressIndicator to show that something is loading or processing. ## [Radio](/uilib/components/radio/) Use Radio when people must choose one option from a set. ## [Section](/uilib/components/section/) Use Section to give an area of the page a visual background or surface. ## [Skeleton](/uilib/components/skeleton/) Use Skeleton to show where content will appear while it is loading. ## [SkipContent](/uilib/components/skip-content/) Use SkipContent to help keyboard users jump past large or repeated content. ## [Slider](/uilib/components/slider/) Use Slider when people need to choose a value from a range. ## [Stat](/uilib/components/stat/) Use Stat to highlight an important number, label, or trend. ## [StepIndicator](/uilib/components/step-indicator/) Use StepIndicator to show progress through a process with several steps. ## [Switch](/uilib/components/switch/) Use Switch when people can turn one setting on or off. ## [Table](/uilib/components/table/) Use Table to show structured data in rows and columns. ## [Tabs](/uilib/components/tabs/) Use Tabs to let people switch between related views on the same page. ## [Tag](/uilib/components/tag/) Use Tag to show a small label, status, or selected value. ## [TermDefinition](/uilib/components/term-definition/) Use TermDefinition to explain a word or phrase without leaving the page. ## [Textarea](/uilib/components/textarea/) Use Textarea when people need to write longer text over several lines. ## [Timeline](/uilib/components/timeline/) Use Timeline to show events or steps in chronological order. ## [ToggleButton](/uilib/components/toggle-button/) Use ToggleButton when people can turn one or more visible choices on or off. ## [Tooltip](/uilib/components/tooltip/) Use Tooltip to give a short hint or explanation for nearby content. ## [Upload](/uilib/components/upload/) Use Upload when people need to choose or drag files into a page. ## [VisuallyHidden](/uilib/components/visually-hidden/) Use VisuallyHidden to keep helpful text available to screen readers but hidden visually.