Skip to main content

Customisation

info

This content is intended for advanced Studio users.

Form renderer supports two approaches to appearance customisation: switching between predefined themes, and overriding CSS variables or selectors in your own stylesheet.

Themes​

Form renderer includes two predefined themes, set via the theme attribute in EhrFormContext:

  • DEFAULT — the standard theme, recommended for most applications.
  • WHITE — recommended for applications with a white background.
context = {
  theme: 'WHITE'
};

Customising styles with CSS variables​

Most style values in Form renderer are defined as CSS custom properties, which you can override from outside the library. The package includes a styles-theme.css file with example overrides as a starting point.

Including your custom stylesheet​

Include your .css file alongside the default Form renderer stylesheets:

<head>
  <script src="/your-path-to-file/form-renderer.js"></script>
  <link rel="stylesheet" type="text/css" href="/your-path-to-file/styles.css" media="screen"/>
  <link rel="stylesheet" type="text/css" href="/your-path-to-file/styles-theme.css" media="screen"/>
</head>

Example: changing the default font size​

.ehr-form,
.ehr-form--theme,
.ehr-form--theme.default {
  --b-ehr-form-font-size: 18px;
}

Overriding properties not exposed as variables​

If the property you want to change is not a CSS variable, target the element directly using a global CSS selector. The following example removes border-radius from a specific field using its EHR path:

.ehr-form div[data-ehr-path="path/to/element"] mrd-field-label > div {
  border-radius: 0;
}

CSS variables reference​

All CSS variables follow the naming pattern --b-{element}-{state}-{property}.

/* General */
--b-ehr-form-background
--b-ehr-form-font-size

/* Input */
--b-input-value-color
--b-input-value-disabled-color
--b-input-value-focused-color
--b-input-caret-color
--b-input-background-color
--b-input-disabled-background-color
--b-input-placeholder-color
--b-input-placeholder-disabled-color
--b-input-placeholder-font-family
--b-input-right-appendix-color

/* Label */
--b-label-color
--b-label-disabled-color
--b-label-error-icon-color
--b-label-tooltip-color

/* Labeled input */
--b-labeled-input-font-family
--b-labeled-input-background-color
--b-labeled-input-invalid-background-color
--b-labeled-input-focused-background-color
--b-labeled-input-border-color
--b-labeled-input-focused-border-color
--b-labeled-input-hover-border-color
--b-labeled-input-no-value-border-color
--b-labeled-input-disabled-background-color
--b-labeled-input-disabled-hatching-color1
--b-labeled-input-disabled-hatching-color2
--b-labeled-input-invalid-border-color
--b-labeled-input-focused-border-color-inner
--b-labeled-input-focused-border-color-outer
--b-labeled-input-invalid-focused-border-color-inner
--b-labeled-input-invalid-focused-border-color-outer
--b-labeled-input-invalid-hover-border-color
--b-labeled-input-presentation-background-color
--b-labeled-input-presentation-value-color

/* Invalid styles */
--b-invalid-text-color
--b-invalid-text-font-family

/* Text input */
--b-text-clear-icon-background-color
--b-text-clear-icon-color

/* Button */
--b-button-selected-background-color
--b-button-selected-border-color
--b-button-selected-color
--b-button-selected-disabled-color
--b-button-selected-disabled-border-color
--b-button-selected-disabled-background-color
--b-button-selected-disabled-check-icon-color

/* Button variants */
--b-button-default-background-color
--b-button-default-border-color
--b-button-default-color
--b-button-default-hover-border-color
--b-button-default-hover-background-color
--b-button-default-active-border-color
--b-button-default-active-color
--b-button-default-active-background-color
--b-button-disabled-color
--b-button-disabled-border-color
--b-button-disabled-background-color
--b-button-disabled-hover-background-color

--b-button-danger-background-color
--b-button-danger-border-color
--b-button-danger-color
--b-button-danger-hover-border-color
--b-button-danger-hover-background-color
--b-button-danger-active-border-color
--b-button-danger-active-color
--b-button-danger-active-background-color
--b-button-danger-disabled-color
--b-button-danger-disabled-border-color
--b-button-danger-disabled-background-color
--b-button-danger-disabled-hover-background-color

--b-button-info-background-color
--b-button-info-border-color
--b-button-info-color
--b-button-info-hover-border-color
--b-button-info-hover-background-color
--b-button-info-active-border-color
--b-button-info-active-color
--b-button-info-active-background-color
--b-button-info-disabled-color
--b-button-info-disabled-border-color
--b-button-info-disabled-background-color
--b-button-info-disabled-hover-background-color
--b-button-link-background-color
--b-button-link-border-color
--b-button-link-hover-color
--b-button-link-active-color

/* Checkboxes and radios */
--b-checkbox-label-color
--b-checkbox-selected-border-color
--b-checkbox-selected-hover-border-color
--b-checkbox-selected-disabled-border-color
--b-checkbox-disabled-label-color
--b-check-input-border-color
--b-check-input-disabled-border-color
--b-check-input-disabled-background-color
--b-check-input-checked-background-color
--b-check-input-checked-border-color
--b-check-input-checked-icon-color
--b-check-input-checked-disabled-background-color
--b-check-input-checked-disabled-border-color
--b-check-input-checked-disabled-icon-color

/* Radio buttons */
--b-radio-input-checked-color
--b-radio-input-checked-background-color
--b-radio-input-checked-border-color
--b-radio-input-checked-disabled-border-color

/* Boolean */
--b-boolean-border-color
--b-boolean-background-color
--b-boolean-disabled-border-color
--b-boolean-checked-icon-color
--b-boolean-checked-background-color

/* 3-state boolean */
--b-three-state-boolean-background-color
--b-three-state-boolean-active-button-color
--b-three-state-boolean-active-button-background-color
--b-three-state-boolean-active-button-icon-color
--b-three-state-boolean-active-button-disabled-background-color
--b-three-state-boolean-disabled-background-color
--b-three-state-boolean-disabled-color
--b-three-state-boolean-disabled-border-color
--b-three-state-boolean-item-disabled-border-color
--b-three-state-boolean-item-disabled-color

/* Boolean switch */
--b-switch-selected-background-color

/* Multimedia / upload */
--b-upload-border-color
--b-upload-area-background-color
--b-upload-clickable-label-color
--b-upload-clickable-label-disabled-color
--b-upload-item-border-color
--b-upload-disabled-border-color
--b-upload-inline-button-background-color
--b-upload-inline-button-color
--b-upload-remove-icon-color

/* Image map */
--b-image-map-area-fill-color
--b-image-map-area-outline-color

/* Canvas */
--b-canvas-background-color
--b-canvas-toolbar-active-color-button-dot-color
--b-canvas-toolbar-reset-button-color
--b-canvas-toolbar-red-color-button-color
--b-canvas-toolbar-yellow-color-button-color
--b-canvas-toolbar-orange-color-button-color
--b-canvas-toolbar-blue-color-button-color
--b-canvas-toolbar-purple-color-button-color
--b-canvas-toolbar-black-color-button-color
--b-canvas-toolbar-white-color-button-color
--b-canvas-toolbar-active-white-color-button-dot-color
--b-canvas-toolbar-color-button-background-color
--b-canvas-toolbar-action-button-color

/* Date */
--b-datepicker-toggle-icon-active-color
--b-datepicker-background-color
--b-datepicker-shadow-color
--b-datepicker-day-background-color
--b-datepicker-day-hover-background-color
--b-datepicker-today-color
--b-datepicker-day-selected-background-color
--b-datepicker-weekday-color
--b-datepicker-month-chevron-color

/* Select */
--b-ng-select-items-background
--b-ng-select-item-background-color
--b-ng-select-item-hovered-background-color
--b-ng-select-item-selected-background-color
--b-ng-select-item-disabled-color
--b-ng-select-item-icon-selected-color
--b-ng-select-item-icon-selected-disabled-color
--b-ng-select-value-badge-clear-icon-color
--b-ng-select-value-badge-background-color
--b-ng-select-value-badge-color
--b-ng-select-value-badge-focused-background-color
--b-ng-select-value-badge-disabled-background-color
--b-ng-select-value-badge-disabled-background-background-color
--b-ng-select-arrow-color
--b-ng-select-clear-icon-color
--b-ng-select-clear-icon-hover-color
--b-ng-select-arrow-focused-color

/* Rich text */
--b-rich-text-anchor-hover-color
--b-rich-text-color
--b-rich-text-background

/* Table / Column list */
--b-table-border-color
--b-table-header-color
--b-table-row-hover-color
--b--table-header-sort-icon-color
--b--table-header-sort-icon-active-color

/* Card / Container */
--b-container-border-color
--b-card-multiplicity-button-background-color
--b-card-multiplicity-add-button-color
--b-card-multiplicity-remove-button-color
--b-card-border-highlight-info-color
--b-card-border-highlight-danger-color
--b-container-header-background-color
--b-container-header-level1-color
--b-container-body-background-color
--b-container-body-border-color

/* Popover */
--b-popover-box-shadow

Frequently asked questions (FAQs)​

What themes does Form renderer provide?

Form renderer includes two predefined themes: DEFAULT (recommended for most applications) and WHITE (recommended for applications with a white background). Set the theme via the theme attribute in EhrFormContext.

How do I change colours or typography?

Override the relevant CSS variables in your own stylesheet. All variables follow the pattern --b-{element}-{state}-{property} and cover inputs, labels, buttons, checkboxes, date pickers, and more. See the CSS variables reference above.

What if the property I want to change is not a CSS variable?

Use a global CSS selector targeting the element by its EHR path or class. This gives you full control over any property not exposed as a variable.