@dnb/eufemia

--- title: 'Components' version: 11.3.0 generatedAt: 2026-05-19T08:46:52.294Z checksum: 090b7d977ba4be5e2c4c04d199a30a4048416c59f443a56985df2f80629d9c40 --- # Components DNB Eufemia components are ready-to-use, styled, and custom-built HTML elements. ## [Accordion](/uilib/components/accordion/) The Accordion component is a combination of an accessible button (header area) and a content container. ## [Anchor (Text Link)](/uilib/components/anchor/) The Anchor, also known as "Link" is used to navigate from one page to the next HTML page. ## [AriaLive](/uilib/components/aria-live/) AriaLive is a React component and hook that helps make your web app more accessible by announcing dynamic changes to screen readers. ## [Autocomplete](/uilib/components/autocomplete/) The Autocomplete component is a combination of an Input and a Dropdown (ComboBox) that suggests matching data items during typing. ## [Avatar](/uilib/components/avatar/) The Avatar component is an identifier that makes people and companies more scannable. ## [Badge](/uilib/components/badge/) The Badge component allows the user to focus on new or unread content or notifications. ## [Breadcrumb](/uilib/components/breadcrumb/) The Breadcrumb component is a bar for navigation showing current web path. ## [Button](/uilib/components/button/) The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism. ## [Card](/uilib/components/card/) `Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically. ## [Checkbox](/uilib/components/checkbox/) The Checkbox component is shown as a square box that is ticked (checked) when activated. ## [CopyOnClick](/uilib/components/copy-on-click/) The CopyOnClick component allows users to copy text to their clipboard simply by clicking on it. ## [CountryFlag](/uilib/components/country-flag/) The CountryFlag component lets you display a country flag based on a country ISO code. ## [DateFormat](/uilib/components/date-format/) A ready to use DNB date formatter. ## [DatePicker](/uilib/components/date-picker/) The DatePicker component should be used whenever the user is to enter a single date or a date period. ## [Dialog](/uilib/components/dialog/) The Dialog component is a Modal variation that appears at the center of the screen. ## [Drawer](/uilib/components/drawer/) The Drawer component is a Modal variation that appears as a side panel at any chosen side of the page. ## [Dropdown](/uilib/components/dropdown/) The Dropdown component is a custom-made data selection component. ## [FormLabel](/uilib/components/form-label/) The FormLabel component represents a caption for all sorts of HTML elements in a user interface. ## [FormStatus (Messageboxes)](/uilib/components/form-status/) The FormStatus is a simple component meant for displaying the status of a form (errors, messages, etc.). ## [GlobalError (404)](/uilib/components/global-error/) The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown. ## [GlobalStatus](/uilib/components/global-status/) The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form. ## [Heading](/uilib/components/heading/) The Heading component is a helper to create automated semantic headings within a boundary of some rules. ## [HeightAnimation](/uilib/components/height-animation/) HeightAnimation is a helper component to animate from 0 to height:auto powered by CSS. ## [HelpButton](/uilib/components/help-button/) A help button with custom semantics, helping screen readers determine the meaning of that button. ## [Icon](/uilib/components/icon/) The main Icon component is basically a wrapper for whatever icon you place within it. ## [InfinityScroller](/uilib/components/pagination/infinity-scroller/) The InfinityScroller component is a mode of the Pagination component which loads content continuously as the user scrolls down the page. ## [InfoCard](/uilib/components/info-card/) The InfoCard is used to give the user more information than a message box. It can also be used to give useful tips. ## [Input](/uilib/components/input/) The Input component is an umbrella component for all inputs which share the same style as the classic text input field. ## [InputMasked](/uilib/components/input-masked/) The InputMasked component uses the basic input component, but with some additional masking functionality. ## [List](/uilib/components/list/) List is a layout component for displaying rows of content, with optional start/center/end slots and a navigable item variant. ## [ListFormat](/uilib/components/list-format/) A ready to use DNB list formatter. ## [Logo](/uilib/components/logo/) A ready to use Logo component with the needed SVGs. ## [Menu](/uilib/components/menu/) Menu is a composable dropdown menu component for actions and navigation, with keyboard navigation, nested menus, and full accessibility support. ## [Modal](/uilib/components/modal/) Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. ## [NumberFormat](/uilib/components/number-format/) A ready to use DNB number formatter. ## [Pagination](/uilib/components/pagination/) The Pagination component supports both classical pagination and infinity scrolling. ## [Popover](/uilib/components/popover/) Popover renders its own floating surface anchored to a trigger element. (For internal use only) ## [PortalRoot](/uilib/components/portal-root/) PortalRoot is a React component that helps you make React Portals. ## [ProgressIndicator](/uilib/components/progress-indicator/) The ProgressIndicator component is a waiting loader / spinner to show while other content is in progression. ## [Radio](/uilib/components/radio/) The Radio component is shown as a circle that is filled (checked) when activated. ## [Section](/uilib/components/section/) The Section component is a visual helper. ## [Skeleton](/uilib/components/skeleton/) The Skeleton component is a visual building block helper. ## [SkipContent](/uilib/components/skip-content/) SkipContent gives users – using their keyboard for navigation – the option to skip over content which contains a large amount of interactive elements. ## [Slider](/uilib/components/slider/) The Slider component provides a visual indication of adjustable value. ## [Stat](/uilib/components/stat/) Composable metric components for highlighted values, trends, and labels. ## [StepIndicator](/uilib/components/step-indicator/) The StepIndicator (progress indicator) is a visual representation of a user's progress through a set of steps or series of actions. ## [Switch](/uilib/components/switch/) The Switch component (toggle) is a digital on/off switch. ## [Table](/uilib/components/table/) Enhanced HTML Table element. ## [Tabs](/uilib/components/tabs/) Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy. ## [Tag](/uilib/components/tag/) The Tag component is a compact element for displaying discrete information. ## [TermDefinition](/uilib/components/term-definition/) TermDefinition renders a compact, inline explanation for a word or phrase with an anchor-style trigger button. ## [Textarea](/uilib/components/textarea/) The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible. ## [Timeline](/uilib/components/timeline/) The Timeline component shows events in chronological order and gives a great overview of the overall process. ## [ToggleButton](/uilib/components/toggle-button/) The ToggleButton component should be used to toggle on or off a limited number of choices. ## [Tooltip](/uilib/components/tooltip/) The Tooltip component is primarily meant to enhance the UX for various and additional information. ## [Upload](/uilib/components/upload/) The Upload component should be used in scenarios where the user has to upload files. Files can be uploaded by clicking a button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed file formats etc. ## [VisuallyHidden](/uilib/components/visually-hidden/) VisuallyHidden has all the styles necessary to hide it from visual clients, but keep it for screen readers.