# UI Components and Behaviour

Everything the widget draws appears inside the `.ccs-window` element, below the search input. The input itself stays in your page, so you style it with your own CSS and can read or set its value like any other field.

## What the user sees

| Component | When it appears | What it does |
|-----------|-----------------|--------------|
| **Code system filter** | As soon as `bind()` runs | A dropdown of the available code systems with their sizes, plus "All code systems". Changing it re-runs the current search. If `defaultCodeSystem` is set, it is pre-selected. |
| **Autocomplete dropdown** | While typing, after `autocompleteMinChars` characters (default 2) | Up to 10 suggestions, each showing the code, the display name and the code system. |
| **Search results** | After pressing Enter | A header with the total count, then one row per result with the code, the display name (matching words highlighted), the code system and an info button. A **Load more** button appears when more results exist. |
| **Concept detail panel** | After clicking a result's info button | The concept's code, name, code system, status, version, definition, synonyms, parent codes, child codes and extra properties, with **Back to results** and **Select this code** buttons. |
| **Loading spinner** | While a search or a detail panel is loading | Hidden as soon as data arrives. |

## Keyboard

With the autocomplete dropdown open:

- `Arrow Down` / `Arrow Up` move through the suggestions
- `Enter` selects the highlighted suggestion, or runs a full search if none is highlighted
- `Escape` closes the dropdown

With the dropdown closed, `Enter` runs a full search. In the detail panel, `Escape` returns to the results.

## Mouse

- Hovering highlights a suggestion; clicking selects it
- Clicking anywhere outside the input and the widget closes the dropdown
- Clicking a result row selects it; clicking its info button opens the detail panel
- **Select this code** in the detail panel selects the concept and closes the panel

## What "select" means

Selecting a concept, from a suggestion, a result row or the detail panel:

1. puts `code — display name` into the search input,
2. makes it available from `CareConekt.CodeSystems.getSelection(ino)`,
3. fires your `onSelect(concept, instanceId)` callback (see [Configuration](configuration.html)).

The shape of `concept` depends on where it was selected from; the Configuration guide shows all three.

## Styling

Your page's CSS cannot reach inside the widget, and the widget's CSS cannot reach your page, with one deliberate exception: the colour and shadow variables listed in the Configuration guide, which you set on the `.ccs-window` element. The search input is a normal element in your page; style it however you like.