EHR UI Components Logo
Color Palette
PracticeEHR Phase 1

UI Standards/Components

Quick access to all of the tabs and sections of the New UI Screens.

Back to Phase 1 Index

Dashboard & Indicators

Cards and at-a-glance metrics

Navigation

Move across screens and sections

Inputs

Forms, selectors, pickers

Feedback & Help

Notifications and guidance

Grids

Grid types and filtering

Advanced

AI elements and special controls

Start from first section Open Color Palette

Advanced Search

Interactive Guide

Advanced Search supports two UI types. Both types use the same behavior: users open Advanced Search to view additional criteria, then click Search. After Search, the criteria collapses and the Advanced Search button shows the applied filter count.

Type 1 Advanced Search Only (Button First)

Type 1

In Type 1, there are no visible fields by defaultonly an Advanced Search button. Clicking it reveals the fields and the Search button. After the user clicks Search, the panel collapses and the Advanced Search button shows the filter count (e.g., œAdvanced Search (3)).

Before

No criteria fields visible. Only the Advanced Search button is shown.

Type 1 before: only Advanced Search button visible

After

Clicking Advanced Search reveals fields and the Search button. After Search, the criteria collapses and the count appears on the Advanced Search button.

Type 1 after: fields and Search visible; after Search, Advanced Search shows applied filter count

Type 1: Key Rules

  • Default view shows only the Advanced Search button.

  • Clicking Advanced Search reveals all criteria fields + Search.

  • Click Search to apply filters and refresh results.

  • After Search, the panel collapses and Advanced Search shows the applied filter count.

Interaction Summary

  1. Start with only Advanced Search.
  2. Click Advanced Search to reveal criteria + Search.
  3. Select filters and click Search.
  4. Collapse criteria + show count on Advanced Search.

Type 2 Basic Fields + Advanced Search (Hybrid)

Type 2

In Type 2, the screen shows basic search fields with both Search and Advanced Search buttons. Clicking Advanced Search reveals additional fields. After the user clicks Search, the criteria collapses and the Advanced Search button shows the applied filter count.

KPI rule (Type 2): When KPI cards are displayed on the screen, only two fields remain visible by default; all other fields move under Advanced Search.

Before

Basic fields are visible with both Search and Advanced Search. (Additional fields remain hidden.)

Type 2 before: basic fields visible with Search and Advanced Search buttons

After

After clicking Advanced Search, more fields appear. After clicking Search, the panel collapses and the Advanced Search button shows the count.

Type 2: Advanced Search expanded (additional fields visible)
Step 1: Advanced Search expanded (more fields visible)
Type 2: After Search, criteria collapses and Advanced Search shows applied filter count
Step 2: After Search, criteria collapses and count appears on Advanced Search

Type 2: Key Rules

  • Default view shows basic fields + Search + Advanced Search.

  • If KPI cards are visible, only two fields stay on screen; the rest move under Advanced Search.

  • Clicking Advanced Search reveals additional fields.

  • Click Search to apply filters and refresh results.

  • After Search, the criteria panel collapses to save space.

  • Advanced Search shows the applied filter count after Search (e.g., œAdvanced Search (3)).

Interaction Summary

  1. Start with basic fields + Search + Advanced Search.
  2. Click Advanced Search to reveal more fields.
  3. Select filters and click Search.
  4. Collapse criteria + show filter count on Advanced Search.

Action Cards

Interactive

Action Cards are clickable content blocks used to highlight grouped, billing-related or workflow-specific actions, such as pending encounters, follow-up tasks, or submissions. These cards visually prioritize content using color-coded icons and numbers, allowing users to quickly assess tasks that require attention.

2 Electronic encounters are on hold for review

2 Electronic encounters are on hold for review

5519 Electronic encounters are not billed since last 2+ days

2 Clearinghouse Rejection(s), need to be reviewed

92 Visit(s) need to be fixed before submission

1094 Visit(s) in plan follow up bucket

243 ERA/Check need posting

236 Visit(s) in patient follow up bucket

12 Prior Auth(s) pending

552 Paper visit(s) to be submitted

Action Cards UI Specifications

Element Property Value Notes
Card Container Dimensions (W x H) Responsive width x 80px min height 2-column layout on desktop, single column on mobile.
Fill (Background) #FFFFFF (100%) Solid white background.
Corner Radius 8px Applies to all four corners.
Auto Layout Flow / Direction Horizontal Content flows from left to right.
Padding (Internal) 16px (Left/Right), 12px (Top/Bottom) Space from the edge to the content.
Gap (Internal) 12px Horizontal space between items inside the card.
Appearance Stroke (Border) 1px, #F2D48A (warning) / #D1D5DB (neutral) Warning cards use yellow border; follow-up cards use neutral gray.
Effects None Updated cards use flat style without shadow.
Grid Spacing (External) 12px Gutter space *between* action cards in a list.
Colors Selection Palette #1D4ED8, #D1D5DB, #F2D48A, #059669... Updated palette for warning, follow-up, and success variants.

Alert Messages

Interactive

Alerts notify users of important messages like success, error, warning, or confirmation. Each alert uses icons, clear color, and optional actions.

Success alert Error alert Warning alert Information alert Tall schedule alert

Alert UI Specifications

Alert Type Property Value Notes
Success Dimensions (W x H) 529px x 83px Node `3138:4017`.
Surface BG `#E6F4EA`, border `1px rgba(0,0,0,0.1)`, radius `6px` Shadow: `20px 20px 20px rgba(0,0,0,0.08)`.
Typography Title `16/600 #22C55E`, Message `14/400 rgba(0,0,0,0.56)` Success has no leading icon.
Close Icon 24px, color `#22C55E`, top/right `10px` Single close control only.
Showcase BG Transparent Gray container background removed.
Error Dimensions (W x H) 529px x 118px Node `3138:4106`.
Surface BG `#FDEAEA`, border `1px rgba(0,0,0,0.1)`, radius `6px` Same shared card shadow token.
Typography Title `16/600 #EF4444`, Message `14/400 rgba(0,0,0,0.56)` Leading error icon size `20px`.
Actions Buttons `34px` high; `Fix Issue` `91px`, `Dismiss` `85.328px` Pill radius `999px`.
Close/Icon Color `#EF4444` Close icon is 24px.
Warning Dimensions (W x H) 529px x 118px Node `3138:4130`.
Surface BG `#FFF8E1`, border `1px rgba(0,0,0,0.1)`, radius `6px` Close icon color `#F59E0B`.
Typography Title `16/600 #F59E0B`, Message `14/400 rgba(0,0,0,0.56)` Leading warning icon size `20px`.
Actions Buttons `34px` high; `Update Insurance` `154px`, `Remind Later` `126px` Pill radius `999px`.
Primary Accent `#F59E0B` Matches icon/title/primary action.
Information Dimensions (W x H) 529px x 118px Node `3138:4176`.
Surface BG `#EAF4FD`, border `1px rgba(0,0,0,0.1)`, radius `6px` Close icon color `#0EA5E9`.
Typography Title `16/600 #0EA5E9`, Message `14/400 rgba(0,0,0,0.56)` Leading info icon size `20px`.
Actions Buttons `34px` high; `Later` `104px`, `Update Now` `126px` Pill radius `999px`.
Primary Accent `#0EA5E9` Matches icon/title/primary action.
Cannot Create Schedule Dimensions (W x H) 529px x 219px Node `3138:4608`.
Typography Title `16/600 #EF4444`, body/label `14/400 rgba(0,0,0,0.56)` Leading error icon `20px`; close icon `24px`.
Conflict Fields Date fields `202x42`, time fields `186x42`, border `#D1D5DB`, radius `6px` Field text `16px #6B7280`, subtle field shadow `0 1px 2px rgba(0,0,0,0.05)`.
Divider `1x96` at x `471`, color `#D1D5DB` Right-side vertical divider in conflict area.

Buttons

Interactive

Buttons are used for actions. Choose the correct type based on importance and context of the task.

Primary Buttons

Main actions like "Save" or "Submit" with bold white text on a colored background.

Primary Button Specifications

Element / Group Property Value Style / Notes
Sizing Resizing (Width) Hug Width adjusts to content (e.g., 187px instance).
Height 34px Fixed height.
Auto Layout Flow Horizontal Content flows left-to-right.
Padding 20px (L/R), 9px (T/B) Internal spacing from edge.
Gap 10px Space between internal items (icon/text).
Appearance Corner Radius 9999px Results in a fully-rounded "pill" shape.
Fill (Background) #3377FF Solid primary blue.
Stroke (Border) None (Weight: 0) No visible border.

Hover Interaction Example

Button shows smooth scaling and background transition on hover for better interactivity.

Secondary Buttons

Less critical actions like "Cancel". White background with a border and colored text.

Specifications

Element / Group Property Value Style / Notes
Sizing Resizing (Width) Hug Width adjusts to content.
Height 34px Fixed height.
Auto Layout Flow Horizontal Content flows left-to-right.
Padding 20px (L/R), 9px (T/B) Internal spacing from edge.
Gap 10px Space between internal items (icon/text).
Appearance Corner Radius 9999px Results in a fully-rounded "pill" shape.
Fill (Background) #FFFFFF Solid white.
Stroke (Border) 1px, Inside, #3377FF 1px solid blue border.
Text/Icon Color #2563EB or #3377FF Inferred from selection/border colors.

Tertiary / Ghost Buttons

Minor actions like "Advanced Search". Light backgrounds and soft colors.

Tertiary Button Specifications

Element / Group Property Value Style / Notes
Sizing Resizing (Width) Hug Width adjusts to content.
Height 34px Fixed height.
Auto Layout Flow Horizontal Content flows left-to-right.
Padding 20px (L/R), 9px (T/B) Internal spacing from edge.
Gap 10px Space between internal items (icon/text).
Appearance Corner Radius 9999px Results in a fully-rounded "pill" shape.
Fill (Background) #EDF3FF Solid light blue.
Stroke (Border) 1px, Inside, #E2E8F0 1px light gray border.
Text/Icon Color #2563EB Inferred from selection colors.

Grid Buttons

Grid (32px)

Grid Buttons follow the same colors and border-radius as Tertiary buttons, but use a tighter size for grids. Height: 32px, Font size: 14px, Font weight: 500.

Grid Button Specifications

Property Value Notes
Height 32px Compact grid-friendly height.
Font size 14px Matches grid typography.
Font weight 500 Medium.
Colors + radius Same as Tertiary Keep the same color tokens and rounded pill radius.

Button States

Disabled: non-clickable. Loading: shows a spinner for async actions.

Pill Buttons

Used for filtering/tagging. Color-coded background with full rounded appearance.

Pill Button Specifications

Element / Group Property Value Style / Notes
Base Sizing Width Hug Content Width adjusts to content.
Height Hug Content (e.g., 21px) Height adjusts to content.
Base Auto Layout Flow Horizontal Content flows left-to-right.
Padding 10px (L/R), 3px (T/B) Internal spacing from edge.
Gap 10px Space between internal items.
Base Appearance Corner Radius 9999px Results in a fully-rounded "pill" shape.
External Spacing 20px Space between pills in a group.
Variants (Examples) Active Patients Fill: #E0F2FE Light blue background.
Completed Fill: #DCFCE7 Light green background.
Pending Review Fill: #FEF3C7 Light yellow background.
All Records Fill: #F3F4F6 Light gray background.

Checkboxes

Multi-select

Checkboxes allow users to select one or more options. Use them when multiple selections are allowed in a group.

Basic Checkboxes

Basic unchecked checkbox

Indicates item is selected

Cannot be clicked

Selected but locked from changes

Checkbox with Label

You agree to our Terms of Service and Privacy Policy

Receive updates and promotions

Checkbox Groups

Vertical Layout

Horizontal Layout

Checkbox Specifications

State Property Value Notes
Default Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #FFFFFF Solid white.
Stroke (Border) #6B7280 Default gray border.
Checked Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #0075FF Solid blue.
Stroke (Border) None (Weight: 0) No border.
Hovered (Default) Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #FFFFFF Solid white.
Stroke (Border) 2px, Inside, EHR Blue Thicker blue border on hover.
Hovered (Checked) Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #0075FF Solid blue.
Stroke (Border) 1px, Inside, #6B7280 Gray border appears on hover.
Disabled (Default) Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #6B7280 Solid gray.
Opacity 31% Semi-transparent.
Disabled (Checked) Dimensions (WH) 20px 20px Fixed size.
Corner Radius 4px Slightly rounded corners.
Fill (Background) #6B7280 Solid gray.
Opacity 31% Semi-transparent (indicates locked selection).

KPI Cards

Metrics

KPI Cards have two supported reference states here: a grid-driven variant that shows only the current totals, and a rolling-date variant that keeps the same card shell but adds inline trend deltas and a shared date control.

KPI card specs

  • Shared card shell: Each KPI fills its grid column and uses a fixed 60px height, 8px internal content gap, and 8px horizontal / 3px vertical padding. Keep the soft neutral surface, 16px radius, and subtle 1px border from the reference.
  • Shared contents: Place a tinted circular icon on the left, then a compact text stack on the right with a muted 14px / 600 label and a dark 18px / 700 value.
  • Grid-driven variant: KPI values are calculated from the current grid results or visible row set. Show only the current label and value in this state, with no inline delta and no shared dropdown in the row.
  • Rolling-date variant: Keep the same four cards, but add a compact inline delta beside each value and place a shared rolling-date control after the card grid.
  • Filter and divider dimensions: In the rolling-date state, render the shared dropdown at 108px width, 36px height, with a 1px by 44px divider filled with #E8EDF3.
  • Tone mapping: Use blue for Total Appointments, green for Completed, red for No-Shows / Cancellations, and amber for Available Slots.
  • Responsive behavior: Keep both variants as a four-card row on wide screens. On smaller screens, let the cards wrap to two columns and then one column. In the rolling-date state, move the shared filter below the grid when space gets tight.

Grid-driven Variant

Matched

Total Appointments

8

Completed

2

No-Shows / Cancellations

2

Available Slots

10

Rolling-date Variant

Matched

Total Appointments

8 +2

Completed

2 +2

No-Shows / Cancellations

2 +2

Available Slots

10 +2

Date Picker Component

Interactive

A Date Picker provides a visual calendar for choosing an exact date without manual typing. It supports month navigation, day selection, and keyboard-free entry; the selected day is highlighted in blue, reinforcing the design system.

Date Picker UI Specifications

Element Name Description Dimensions Style / Notes
Input Field Displays selected date; opens panel on click. 486px 42px Fill: #FFFFFF, Corner Radius: 6px, Opacity: 100%
Input Field (Appearance) Border and shadow for the input field. Stroke: 1px, Inside, #D1D5DB, Effect: Drop Shadow
Calendar Header (Inferred) Shows current month & year. Auto height Contains Prev / next buttons.
Day Cell (Inferred) Selectable day number. ~30 30 px Rounded; active = bg-blue-600 text-white.
Selection Behavior (Inferred) Selecting a day applies the date immediately. Auto No Set Date / Clear action buttons in the panel.
Panel Container (Inferred) Holds calendar & controls. ~486px width See table below for detailed specs.

Calendar Panel (Opened State)

Property Value Notes
Dimensions (WH) 362px 375px Fixed size for the dropdown panel.
Layout Flow Horizontal As specified in Figma (may apply to header/footer).
Fill (Background) #FFFFFF (100%) Solid white background.
Corner Radius 6px Applies to the panel container.
Stroke (Border) 1px, Inside, #E5E7EB Light gray border.
Effects Drop Shadow (x2) Two drop shadow effects applied for depth.

Date Range Component

Interactive

Behavior Notes

  • First click sets From; second click sets To.
  • The same date can be used for both From and To.
  • If both dates are already set, the next click updates To.
  • If To is left blank, the system treats it as infinity (open-ended range).
  • While choosing To, the hint shows MM/DD/YYYY - To date.
  • Click the X icon to clear the range.

Date and Time Picker Component

Interactive

A date picker is a compact calendar UI that allows users to choose a specific day and time without typing manually. The time picker appears inline under the calendar after a date is selected. Select any date to enable time properties

Time Picker Specifications

Element Name Description Dimensions Style / Notes
Input Field (Inferred) Displays selected date and time. Full width Rounded border, readonly, calendar icon inside.
Calendar Grid (Inferred) Clickable calendar dates (part of Date Picker). 7 columns 3232px buttons, rounded, highlight on select.
Time Picker Panel Inline panel for hour, minute, and AM/PM. 362px 221px Fill: #FFFFFF, Corner Radius: 6px, Opacity: 100%.
Time Panel (Layout) Auto layout for the time panel. Flow: Vertical, Padding: 10px (L/R) & 1px (T/B), Gap: 15px.
Hour / Minute List (Inferred) Selectable time units within the panel. Auto Scrollable, hover-highlight, selected state.
AM/PM Buttons (Inferred) Toggle between AM and PM. Auto Two rounded buttons, active highlighted.
Selection Behavior (Inferred) Select date first, then hour/minute and AM/PM to apply. Auto No Set/Clear buttons. Value applies automatically once AM/PM is selected.

Header Tabs

Interactive

Header Tabs allow users to navigate between major modules in the application. The active tab is highlighted using blue icon and background.

Header Quick Links

Open full header docs

Main Header Tabs “ Specifications

Element State Property Value Style / Notes
Active (Selected) Tab Sizing (WH) Hug Content (e.g., 120px) Hug Content (e.g., 41px) Dimensions adapt to content.
Layout Flow Horizontal Content (icon + text) flows left-to-right.
Padding 24px (L/R), 11px (T/B) Internal spacing from the edge.
Gap 8px Space between icon and text.
Fill (Background) #EFF6FF Light blue background.
Corner Radius 9999px Fully-rounded "pill" shape.
Text/Icon Color #2563EB From "Selection colors".
Inactive Tab Sizing & Layout Same as Active Padding, Gap, Sizing, and Radius are identical.
Fill (Background) None / Transparent Likely transparent until hovered.
Text/Icon Color #E5E7EB (or similar gray) From "Selection colors".
Hover Text/Icon: #2563EB Text/icon color changes on hover.
Tab Container (Inferred) Holds all tabs, e.g., Background: #F9FAFB, Full Width ~48px

Secondary Tabs

Secondary tabs are used within modules like Billing or RCM to switch between sub-views. The active tab appears white with a blue icon and label, elevated with a shadow.

Secondary Tabs “ Specifications

Element / State Property Value Style / Notes
Base Tab Layout Sizing (WH) Hug Content Hug Content Dimensions adapt to content (e.g., 118x40px).
Layout Flow Vertical Content (icon + text) flows top-to-bottom.
Alignment Center Icon and text are centered.
Padding 11px (L/R), 8px (T/B) Internal spacing from the edge.
Gap 10px Vertical space between icon and text.
Corner Radius 8px Rounded corners for the tab.
Active Tab (Inferred) Typically has a solid fill (e.g., #EFF6FF) and primary text color (e.g., #2563EB).
Inactive Tab (Inferred) Typically has a transparent fill and secondary/gray text color (e.g., #6B7280).

Tertiary Tabs

Tertiary tabs are used within sub-modules to further divide views. Only one is active at a time and uses minimal space with bold blue text and white background.

Tertiary Tabs “ Specifications

Element Name Description Dimensions Style / Notes
Base Tab Layout Auto layout for a single tab item. 145px 42px (Hug) Flow: Horizontal, Corner Radius: 8px, Opacity: 100%
Base Tab (Layout) Internal spacing for the tab. Padding: 13px (L/R) & 10px (T/B), Gap: 10px
Tab Container (Inferred) Houses all tabs horizontally. Full Width 42 px Background: #F3F4F6, Rounded, Scrollable.
Active Tab (Inferred) Currently selected tab. (Uses Base Layout) Background: #FFFFFF, Text/Icon: #2563EB, Elevation: shadow-sm.
Inactive Tab (Inferred) Unselected tabs. (Uses Base Layout) Background: Transparent, Text/Icon: #6B7280, Hover text: #2563EB.

Loader Component

Status

This component includes three supported states: tab loading (inline on the selected tab), full-screen loading (centered in the content area), and login splash loading (next to the PracticeEHR logo).

Tab Loading

Show the loader on the right side of the selected tab label while data is loading.

Screen Loading

For a blank workspace or full-page wait state, center the loader in the visible content area.

Loading...

Login Splash Loading

For login, show the PracticeEHR logo with the loading animation to the right while the app initializes.

PracticeEHR

Loader Specifications

State Placement Loader Size Notes
Tab Loading Right of active tab text 18px x 18px Use inline with icon + label in the selected tab only.
Screen/Grid Loading Centered in content window 64px x 64px Use when the entire workspace is waiting on a response.
Login Splash Loading Right of PracticeEHR logo 34px x 34px Use on login splash while user session and app shell load.

File Uploader

The File Uploader lets users attach one or more documents (PDF, Word, images) right inside a form. It supports drag-and-drop or click-to-browse, shows a removable file list, and follows our accessibility and brand-blue standards.

Attach Documents

    File Uploader Specifications

    Element Name Dimensions (W H) Style / Notes
    Uploader Card 100% auto rounded-2xl, p-6, shadow-sm, white bg
    Dropzone 100% 160 px Dashed border, gray-50 bg, brand-blue hover
    Cloud Icon 48 48 px #1D4ED8 fill, white arrow stroke
    Instruction Text Upload Files bold; helper text underlined blue
    Accepted Types PDF, DOC/DOCX, JPG/JPEG, PNG
    Remove Action 16 16 px button Gray icon → red on hover; deletes list item

    Grid Filters

    UI

    Grid Filters are present next to each column name as a funnel/filter icon. There are five types of grid filters based on the type of data in each column.

    Pre-defined Filters Grid example screenshot
    Filter icons next to column names

    Filter Type 1: Dropdown with Fixed Number of Options

    When the filter has a fixed number of options (typically 2“4), like priority levels (e.g., Medium, Normal, Urgent, High).

    Pre-defined Filters Grid example screenshot
    Type 1 example
    Action Behavior
    Click Dropdown Opens the options list (popover-style)
    Select Option Highlights row, shows checkmark or selected style
    Multi-select Support Checkbox may appear for multi-selection, or use single selection highlight
    Close on Click Outside Automatically closes when user clicks elsewhere

    Filter Type 2: Date Filter with Condition + Picker

    When filtering based on dates, a combination of a condition dropdown and a date picker is used to create flexible, accurate queries.

    Pre-defined Filters Grid example screenshot
    Type 2 example (state 1)
    Pre-defined Filters Grid example screenshot
    Type 2 example (state 2)
    Pre-defined Filters Grid example screenshot
    Type 2 example (state 3)
    Action Behavior
    Select Condition Opens a dropdown with options like Is equal to, Is before, Is null
    Enter Date Opens a calendar-style date picker to choose a specific date
    Click 'Today' Instantly sets the value to the current date
    Click 'Clear' Resets both condition and value fields to empty
    Click 'Apply' Confirms the selected date and condition
    Close on Outside Click Automatically closes dropdown or calendar if the user clicks elsewhere

    Filter Type 3: String Condition with Input Field

    This filter is used for string-based fields like Patient Name, Diagnosis, Email, etc., allowing users to apply conditions to text values.

    Pre-defined Filters Grid example screenshot
    Type 3 example
    Action Behavior
    Select Condition Opens a dropdown with string-based conditions: Contains, Does not contain, Is null, Is not null
    Enter Value User types in the desired search string to filter against
    Click 'Clear' Resets the condition and input field
    Click 'Filter' Applies the selected condition and input string to filter data
    Close on Outside Click Closes dropdown when user clicks outside

    Filter Type 4: Multi-Select from Contextual List

    Used when the column has many possible entries, but the dropdown shows only values relevant to the current grid view.

    Pre-defined Filters Grid example screenshot
    Type 4 example
    Action Behavior
    Open Dropdown Shows only those values currently found in the active grid view
    Select Multiple Allows multi-selection via checkboxes
    Highlight Selected Uses background color + checkmark to indicate active selections
    Scroll Support Vertical scrolling enabled for overflow (with max height constraint)
    Close on Outside Click Closes the dropdown when user clicks elsewhere

    Filter Type 5: Numeric Condition with Input Field

    Used for numeric-based fields (e.g., Balance, Amount, Charges) where the user can filter by comparing numerical values.

    Pre-defined Filters Grid example screenshot
    Type 5 example
    Action Behavior
    Select Condition Opens a dropdown with numeric comparison operators: Is equal, Is greater than, Is less than, Is not null
    Enter Numeric Value User inputs a number using a number-only input field
    Use Arrow Buttons (▲▼) Increases or decreases the value by 1 using spinner controls
    Click 'Clear' Resets both condition and value
    Click 'Filter' Applies filter based on numeric condition
    Validation Prevents non-numeric input (e.g., letters, symbols other than numbers)
    Close on Outside Click Closes dropdown when user clicks outside

    Example Usage

    Choose the filter type based on the column™s data type. Example: Status → Type 1; DOS → Type 2; Patient Name / Chief Complaint / Provider / Location → Type 3.

    Example usage screenshot
    Example grid with filter types referenced
    Status column filter example screenshot
    Status column → Type 1
    DOS column date filter example screenshot
    DOS column → Type 2
    String column filter example screenshot
    String columns → Type 3

    Search Bar

    Component

    Use a dedicated <pehr-searchbar> tag wherever a search input is needed (especially inside grids). Grid search fields use a fixed height of 34px.

    Rendered example

    Props: variant="grid", placeholder, optional height (overrides).
    Selected (focus) state: blue.

    Quick Search Fields

    Component

    Label indicators

    Blue link = hyperlink

    * = mandatory field

    Scenario 1

    Scenario 2

    Today's Assessment(s)

    Description ICD Snomed ID Detail Action

    Showing 1 to 5 of 42 results

    ...

    Scroll Behavior

    Component

    Throughout PEHR, scrollbars should be hidden by default and only appear when hovering the scrollable area. Use <pehr-scroll-area> as the standard wrapper so behavior stays consistent everywhere.

    Rendered example

    Scrollable content
    Row 1 Example content
    Row 2 Example content
    Row 3 Example content
    Row 4 Example content
    Row 5 Example content
    Row 6 Example content
    Row 7 Example content
    Row 8 Example content
    Row 9 Example content
    Row 10 Example content
    Props: max-height (or CSS var --pehr-scrollarea-max-height).
    Scrollbar behavior: hidden by default, appears on hover.

    Scrollbar Positioning Rules

    • ≤ 10 rows: Scrollbar appears inside the grid (takes up space within the grid area)
    • > 10 rows: Scrollbar appears on the window/viewport edge (beside the grid, doesn't reduce content width)

    Default Behavior

    • ¢ Scrollbars are hidden by default
    • ¢ Appear only on hover over the scrollable area
    • ¢ Smooth fade-in/fade-out transition

    Pagination

    Component Spec

    Pagination consists of a left info area and right controls (page navigation + refresh).

    œShowing 1 to 5 of 42 results represents the visible range (1“5) and the total results count (42).

    Pagination UI: Excel icon + 'Showing 1 to 5 of 42 results' + page controls + refresh

    Key Rules

    • œShowing X to Y of Z results indicates the visible range and the total results.

    • Left icon represents export/action context (Excel-style).

    • Refresh icon reloads the grid without changing pagination state.

    Interaction Summary

    1. User reads total results from the left text.
    2. User navigates pages via previous/next and page numbers.
    3. User refreshes results using the refresh icon.

    Radio Buttons

    Single-select

    A radio button lets users pick one option from a list. Clicking one will automatically unselect the others in that group. Only one choice is active at a time.

    Vertical Layout

    Default

    Questions and answers are stacked one below the other.

    Does the patient have any allergies?

    Selected State

    Active

    One of the answer choices is clicked (like "Yes").

    Disabled State

    Locked

    The question is locked and can't be edited.

    This field cannot be modified

    Error State

    Required

    The user skipped the question, and the system shows a red warning.

    Please select an option

    Row drag & drop (reordering)

    UI

    This behavior can be used in any grid. The drag handle on the left lets users drag rows to reorder them.

    Example row drag using the handle
    • Click and hold the icon, then move the row up or down.
    • Dropping the row updates its position in the grid.
    • This reorders rows without changing the row data.

    Documentation: Kendo UI for jQuery Grid Row Drag & Drop

    Home Grids

    UI

    Home Grids are tables that show important information like patients in the office. You can search, filter, and view data easily in these tables.

    Refresh: Re-loads the grid results using the current view. It keeps the current search text and sort order, and updates the rows.
    Top Dropdown Filters: Dropdowns are present at the top left of the grid allowing the user to filter through different providers, locations and practices. In case of single practice then the practice dropdown will be hidden and the remaining two dropdowns will be moved to the left.
    Sorting: sort icons nex to each column name
    Home Grid example screenshot
    Home Grid example

    Auto Search Grids

    UI

    Auto Search Grids are tables that automatically show important data (like claims, charges, etc.) when you open a screen.

    Refresh: Re-runs the current query and reloads the auto-loaded results without changing the active filters.
    Column filters: Filter icons in next to each column name
    Auto Search Grid example screenshot
    Auto Search Grid example

    Optional Auto Search Grids

    UI

    Optional Auto Search Grids allow the practice to enable or disable auto search through a toggle available in Setup → Grid Manager for some grids.

    Refresh: Reloads results using the current toggle state and criteria. If auto-search is enabled, it refreshes the auto-applied date range results; otherwise it refreshes the last search.
    Column filters: Yes (filter icons in headers)Sorting: Yes (sortable + filterable headers)
    Optional auto-search disabled screenshot
    Toggle disabled: search + Advanced Search option
    Optional auto-search advanced search screenshot
    Advanced Search expanded

    Grids with Manual Search

    UI

    Manual Search Grids are tables that stay empty when you open the screen. You must fill in the search form and click the Search button to load data into the grid.

    Refresh: Re-runs the most recent search (using the last submitted criteria) and reloads the results.
    Sorting: Yes (sortable columns)
    Manual Search Grid example screenshot
    Manual Search Grid example

    Grids with Pre-defined Filters

    UI

    These grids include pre-defined filters or views near the general search bar, allowing users to switch the grid view quickly.

    Refresh: Reloads the grid results using the selected pre-defined view and the active search/filter state.
    Column filters: Yes (filter icons in headers)
    Pre-defined Filters Grid example screenshot
    Pre-defined Filters Grid example

    Active Report Grids

    UI

    Active Report Grids display detailed report results. These grids are powered by a third-party reporting tool and are used mainly for viewing and exporting summaries.

    Active Report Grid example screenshot
    Active Report Grid example

    Patient Cards

    Summary Card

    This component provides a quick summary of key patient details including preferred pharmacy, critical alerts, last visit, and next appointment. It is optimized for readability and visual scanning using icons and color-coded sections.

    Pharmacy

    Shollenberger Pharmacy

    2002 S. McDowell Blvd Ext

    Alerts & Flags

    Penicillin Allergy, Fall Risk, Needs Flu Shot

    Last Visit

    04/28/2025

    Annual Physical
    Dr. Johnson

    Next Appointment

    06/15/2025

    Follow-up Visit
    Dr. Smith

    Patient Cards UI Specifications

    Element Description Dimensions Style / Notes
    Container Wraps all patient cards Full width auto height Border: #E5E7EB, Radius: 12px, Padding: 16px, Shadow
    Heading Title of the section Auto Font: Bold, Color: #111827
    Explanation Text Descriptive paragraph Max width: 640px Font: text-sm, Color: #4B5563
    Card Info box for each category ~260“300px wide Rounded: 10px, Border: #E5E7EB, BG: #F9FAFB
    Icon Container Colored circle with icon 40 40 px Rounded-full, background varies by section
    Main Text Primary content (e.g. name/date) Auto Font: Semibold, Color: #1F2937
    Labels Category titles (e.g. Pharmacy) Auto Font: text-xs, Color: #6B7280
    Plus Button Add action in Pharmacy card 24 24 px Rounded-full, BG: #DBEAFE, Color: #2563EB

    Text Box

    Interactive

    A text box is a blank area where you can type words, numbers, or messages. It's like a small writing space on a screen.

    Label indicators

    Blue link = hyperlink

    * = mandatory field

    Default State

    Empty

    The textbox is empty and shows placeholder text. It's ready for the user to start typing.

    0/500 characters

    Focused State

    Active

    The user has clicked into the textbox. The border changes color to show it's active.

    0/500 characters

    Filled State

    Content

    Text has been entered. The character count updates to show how much has been typed.

    342/500 characters

    Error State

    Required

    The textbox is required but left blank. It shows a red border and an error message.

    Clinical notes are required

    0/500 characters

    Disabled State

    Locked

    Textbox is locked, users can't type anything. It looks faded and shows a message below.

    Field disabled

    Text Box UI Specifications

    Element Name Description Dimensions Style / Notes
    Text Box Field Input area for user text 486 114 px Border: 1px solid #D1D5DB, Radius: 8px, Padding: 12px
    Placeholder Text Hint text shown inside empty box Font: 14px, Color: #9CA3AF
    Character Count Displays current and max characters Font-size: 12px, Color: #6B7280
    Focused State When user clicks into the box 486 114 px Border: 2px solid #3B82F6, Ring: 2px on focus
    Error State When required field is empty 486 114 px Border: 1px solid #EF4444, Message text in red
    Disabled State Box is inactive and non-editable 486 114 px Background: #F9FAFB, Text color: #9CA3AF

    Text Field

    Interactive

    A text field is a single-line input used for short-form entries like names, emails, or subjects.

    Label indicators

    Blue link = hyperlink

    * = mandatory field

    Enabled State

    Active

    The text field is active and ready for input. You can type in the field below.

    Disabled State

    Locked

    The text field is locked and cannot be edited. It has a light gray background as specified.

    Text Field UI Specifications

    Property Value Tailwind Class / Notes
    Component Input Field <input type="text">
    Dimensions 486 42 px w-full. Height is 42px. Using p-3 results in ~44px, which is consistent with the Text Box.
    Corner Radius 6 px rounded-md
    Disabled Fill #F3F4F6 bg-gray-100

    Comments Component

    Interactive

    This component supports rich text comments, @mentions, and threaded updates for team collaboration.

    | |
    But don't you think the timing is off because many other apps have done this even switch apps? @A

    Allowed characters list

    • All letters
    • Numbers
    • Whitespace (spaces, tabs, newlines)
    • Punctuation: . , ! ? : ; ' " ( ) [ ]
    • Symbols: @ # $ % & * - _ + = / \
    • Line breaks

    Validation rule: If a user enters any special character that is not in the allowed list, the system shows a validation error and does not allow the user to proceed.

    Time Picker Component

    Interactive

    A Time Picker lets users choose a precise time without typing. It presents scrollable hour / minute columns plus an AM / PM toggle. Selected values turn blue to reinforce your design system.

    Time Picker Specifications

    Element Name Description Dimensions Style / Notes
    Input Field (Inferred) Displays selected date and time. Full width Rounded border, readonly, calendar icon inside.
    Calendar Grid (Inferred) Clickable calendar dates (part of Date Picker). 7 columns 32x32px buttons, rounded, highlight on select.
    Time Picker Panel Inline panel for hour, minute, and AM/PM. 362px 221px Fill: #FFFFFF, Corner Radius: 6px, Opacity: 100%.
    Time Panel (Layout) Auto layout for the time panel. Flow: Vertical, Padding: 10px (L/R) & 1px (T/B), Gap: 15px.
    Hour / Minute List (Inferred) Selectable time units within the panel. Auto Scrollable, hover-highlight, selected state.
    AM/PM Buttons (Inferred) Toggle between AM and PM. Auto Two rounded buttons, active highlighted.
    Selection Behavior (Inferred) Selecting hour, minute, or AM/PM updates input instantly. Auto No Set/Clear buttons; selection commits immediately.

    Time Range Component

    Interactive

    Behavior Notes

    • First selection sets From; next selection sets To.
    • If both values are already selected, opening the picker updates To by default.
    • While choosing To, the guiding text is HH:MMAM/PM - To time.
    • Choose hour and minute first, then click AM or PM to apply and move to the next step.

    Toggle Controls

    Interactive

    Toggles let users enable or disable specific settings. Best used when only two options are available.

    Enforce Reason

    Reason will be set to mandatory

    Not Available

    Providers can set their availability

    Toggle Controls UI Specifications

    Element Description Dimensions Style / Notes
    Toggle Switch (Off) Default state of the switch 44 23 px Background: #D9D9D9, Circle left, Border-radius: full
    Toggle Switch (On) Activated switch position 44 23 px Background: #3377FF, Circle right, Border-radius: full
    Label Text Main heading for toggle item Font: Inter, Size: 16px, Weight: 600, Color: #111827
    Subtext Supporting description below label Font: Inter, Size: 14px, Color: #6B7280
    Card Container Wraps each toggle block ~300 120 px Background: #FFFFFF, Shadow-md, Rounded-xl, Padding: 24px

    Tree View Navigation

    Interactive

    Hierarchical navigation with expandable groups. Click a group to expand/collapse. The badge switches between œ+ and œâˆ’.

    + Administration
    + Billing
    + Clinical
    + Scheduling
    + Others
    Automation

    Tree View Specifications

    Element Description Dimensions Style / Notes
    Group Header (Pill) Clickable summary row for each group Auto width 44“48 px height BG: #BFDBFE (~Tailwind bg-blue-200 with 70%); Radius: 12px; Font: 600; Text: #1F2937
    Plus/Minus Badge Indicates collapsed/expanded 24 24 px Circle, BG: #2563EB (bg-blue-600), Text: white; œ+ hidden on open, œâˆ’ shown
    Children Row Nested item inside a group Auto 28“32 px Left padding 40px (visual indent), Hover BG: #F3F4F6, Clickable
    Folder Icon Blue folder next to each child 16 16 px Font Awesome fa-folder, Color: #2563EB
    Selected State (Optional) Active/selected item style Apply active class to child: BG #EFF6FF, Rounded 8px

    Tooltips

    Information

    The Tooltip helps identify which dashboard or workspace the user is currently in. It's styled like a speech bubble to make the section stand out clearly.

    Interactive Example

    Hover over the element to see the tooltip appear.

    Tool Tips Specifications

    Element Description Dimensions Style / Notes
    Tooltip Container Holds the tooltip content on hover Auto width ~32 px height Rounded-md, Shadow-sm, Padding: 6px 12px
    Tooltip Text Descriptive message inside tooltip Auto Font: Inter, Size: 14px, Color: #374151
    Trigger Element Element that shows tooltip on hover Depends on usage Typically a button, icon, or label
    Arrow Pointer Small triangle that points to trigger ~8 8 px Rotated square, same bg as container
    Positioning Location of tooltip relative to trigger Top, bottom, left, or right Managed by JS/utility (e.g., Tailwind or Popper.js)

    AI Buttons

    Standard button pair for all AI-related actions in PracticeEHR.
    Use the Primary (filled purple) style for the main AI action and the Secondary (outlined purple) style for alternate or less-prominent actions.

    Specification

    Element Dimensions (W H) Style / Notes
    Primary Button Auto 40 px bg-purple-600 text-white, rounded-full, hover shade purple-700
    Secondary Button Auto 40 px 1 px purple-600 border, text-purple, hover bg-purple-50
    Star Icon 20 20 px #8B5CF6 fill; aligns left of label
    Upload Icon 20 20 px 1.5 px stroke, follows text color

    AI Toggle

    AI toggle will have the functionality of the toggle same as the other Practice EHR toggle but it is purple.

    Specification

    Element Dimensions (W  H) Style / Notes
    Track 56 32 px Off: gray-300 ¢ On: purple-600
    Thumb 28 28 px Slides 24 px right on enable

    AI Pagination Component

    Navigation

    Pagination lets users move through AI-generated note history, conversation logs, and other multi-page AI views. It includes page numbers, previous/next buttons, and an optional refresh control.

    Pagination Example

    ...

    Specification

    Element Dimensions (W  H) Style / Notes
    Page Button 32  32 px Border purple-300; active page bg-purple-600 text-white