DNB Eufemia components are ready to use, styled and custom build HTML elements.
The Button component should be used as the primary call-to-action in a form, or as a user interaction mechanism.
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.
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.
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.)
The form-label element represents a caption for an item in a user interface.
The FormRow component is a helper to archive more easily often used DNB form layout setups. By default a
FormRow is using the
<legend> HTML elements - if a label property is provided.
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.
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.
The GlobalError is a simple component to integrate where a
500 message has to be shown.
The GlobalStatus is a complex component meant for displaying global Application notifications or a summary of a form ( displaying form errors, messages etc. ).
The main Icon component is basically a wrapper for whatever icon you place within it. This means a span wrapping an inline svg.
The IconPrimary component loads by default all Primary Icons so they can easily be included and used without additionally importing every icon.
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.
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.
A ready to use DNB logo in SVG format.
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.
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.
Use a ProgressIndicator whenever the user has to wait for more than 150ms.
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.
Notifications are messages that communicate information to the user.
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.
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).
The Space component provides
margins within the provided spacing patterns.
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 are a set of buttons which allow navigation between content that is related and on the same level of hierarchy.
The Textarea component has to be used as a multi-line text input control with an unlimited number of characters possible.
The ToggleButton component should be used to toggle on or off a limited number of choices.