Skip to content

Components

DNB Eufemia components are ready to use, styled and custom build HTML elements.

Button

The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.

Checkbox

The Checkbox component is shown as a square box that is ticked (checked) when activated. Checkboxes are used to let a user select one or more options of a limited number of choices.

DatePicker

The DatePicker component should be used whenever there is to enter a single date or a date range/period with a start and end date.

Dropdown

The Dropdown component is a fully custom-made component. This allows us to change it's form based on context (small screens, touch devices etc.)

FormLabel

The form-label element represents a caption for an item in a user interface.

FormRow

The FormRow component is a helper to archive more easily often used DNB form layout setups. By default a FormRow is using the <formset> and <legend> HTML elements - if a label property is provided.

FormSet

The FormSet component gives You both a HTML form element <form> by default and also a React provider for FormRow. This way You can define more globally e.g. if all the rows should be displayed vertically.

FormStatus

The FormStatus is a simple component meant for displaying the status of a form ( displaying form errors, messages etc. ) The form-status component should be positioned relative to the form or form input to which it referring to.

GlobalError

The GlobalError is a simple component to integrate where a 404 or 500 message has to be shown.

GlobalStatus

The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form ( displaying form errors, messages etc. ).

Icon

The main Icon component is basically a wrapper for whatever icon you place within it. This means a span wrapping an inline svg.

IconPrimary

The IconPrimary component loads by default all Primary Icons so they can easily be included and used without additionally importing every icon.

Input

The input component is an umbrella component for all inputs which share the same style as the classic text input field. Radio buttons and other form elements are not included here.

InputMasked

The InputMasked component uses the DNB Eufemia normal input component, but with some additional masking functionality. Read more about the details on the open source project.

Logo

A ready to use DNB logo in SVG format.

Modal

Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. The main content is disabled until the user interacts with the modal dialog.

Number

The number component is a ready to use DNB number formatter. Use it where over you have to display a number, a currency value, phone number etc.

ProgressIndicator

Use a ProgressIndicator whenever the user has to wait for more than 150ms.

StepIndicator

The step indicator (progress) is a visual representation of a users progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required of them.

Notification

Notifications are messages that communicate information to the user.

Radio

Radio buttons lets a user select one option / value of a limited number of choices. It is recommended to use it in a group. You can use either the React component <Radio.Group> or use the property group="NAME" to define the group.

Slider

Sliders provide a visual indication of adjustable content. A value can be adjusted (increased or decreased) by moving the drag handle along a track (usually horizontal or vertical). Remember to inform users that they can also adjust the value directly in the value input field (if it exists).

Space

The Space component provides margins within the provided spacing patterns.

Switch

The Switch component (toggle) is a digital on/off switch. Toggle switches are best used for changing the state of system functionalities and preferences.

Tabs

Tabs are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.

Textarea

The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.

ToggleButton

The ToggleButton component should be used to toggle on or off a limited number of choices.