Controls and keyboard

Every part of DataMind Oda is built from the same small set of controls: buttons, menus, dropdowns, toggles, steppers, tabs and text fields. They behave the same way wherever they appear, and each one can be driven from the keyboard. This page collects those conventions; the shortcuts that work anywhere in the app are in Keyboard shortcuts.

Buttons

• Buttons come in several weights: a filled primary treatment for the main action of a surface, quieter secondary, ghost and outline treatments for the rest, and danger tones for actions that remove or disconnect something.
• While a button is working, a ring replaces its icon and the button keeps its name for assistive technology. Wait for the ring before pressing again.
• A button can carry its shortcut as a keycap at its end; on a filled primary button the keycap inverts to stay readable.
• An icon-only button carries its meaning in a tooltip, described in Toasts, tooltips and hover previews.
• Small chips on a line of text are covered, with the rest of the state vocabulary, in Statuses and progress.

Menus

• A menu opens anchored to the button that shows it. Its rows are the choices; a heading inside a menu is a label, not a choice, and thin separators split groups of rows.
• A row can carry an icon, a keycap for its shortcut, or open a submenu: point at or focus such a row and the submenu opens to its right; moving to another top-level row closes it.
• Your current choice is marked with a check at the row's end, or by holding the row's fill, never both. A destructive row is tinted for danger and still selects like any other row.
• A long menu scrolls inside itself, and rows pinned at its foot stay in place and still select.
• A menu stays open until you choose a row, press Escape, or click elsewhere; moving the pointer away does not close it. Where a menu is set to close when the pointer leaves, it waits a short grace first, so the trip from the button into the list, or a small overshoot on the way, never closes it.
• Switching to another app or tab leaves a menu in place; it closes only when the keyboard focus moves into an embedded page.

Dropdowns and their lists

• A dropdown shows your current choice on its closed trigger, or a placeholder before you choose. A disabled dropdown refuses to open.
• Open it with a click, or with Enter, Space or the Up arrow on the trigger. The arrow keys and Home and End move the highlight, skipping greyed-out options; Enter or a click chooses and closes the list.
• Escape or a press outside closes the list, and so does Tab; a press inside it never closes. Pointing at an option moves the highlight but never onto a disabled one. Choosing the value that is already chosen just closes the list.
• Options can group under headings, with ungrouped options first, and a second line under an option, such as a description, makes the row taller. The list scrolls the highlighted option into view.
• A dropdown whose list holds more than eight options grows a search field above it: type to filter, and the keyboard stays in the field while the arrow keys move the highlight.

Toggles, checkboxes and radios

• A switch flips between two states. A group switch shows a halfway state when only part of its group is on; clicking it then asks for the whole group to be on, not off.
• A locked switch says why: point at it and the reason appears as a tooltip. A switch can also lock while its change is being applied.
• Clicking the words beside a checkbox ticks it, not only the box itself, and a checkbox can show a halfway state of its own. While it is disabled, its label stops responding.
• Radios that share a group move with the arrow keys, and a group can run down the page or across it. A disabled group locks every radio in it.

Number steppers

• A stepper shows a value between a minus button and a plus button. Both buttons stay visible and grey out at their limits: the minus at the lowest value, the plus at the highest, and a value asked for past a limit stops at the limit.

Segmented switches, tabs and option cards

• A segmented switch places a few modes side by side in equal widths, with one indicator sliding to the current mode. A disabled segment explains itself on hover, and the whole switch locks while a change that switching would interrupt is being saved or fetched.
• Underline tabs mark the chosen view with an underline; one tab at a time is selected, and only that tab is in the keyboard order.
• An option card is a bigger radio: a card you choose in place of a small dot. The chosen card gains an accent border and a check badge. Cards sit in a grid, three per row by default.

Text fields

• A single-line field comes in three heights: 28, 32 and 40 pixels, with 32 as the default. A field can carry a leading icon.
• When a value is rejected, the field draws an error border and reports itself as invalid to assistive technology; a hint and an error message are both announced when present, the hint first.
• A disabled field dims and shows a not-allowed cursor.
• A multi-line field can show a live counter in the form 5 / 240: the characters used, then the limit. The counter appears only when the field has a limit.

Keyboard conventions

The controls share one keyboard model:

• Tab moves between controls; inside a control that owns its arrow keys, the arrows move within it and Tab carries on to the next one.
• From the button that opens a menu, Tab enters the list. Inside it, the arrow keys and Home and End walk the rows, wrapping at the ends and stepping over disabled rows; the walk resumes from where the focus last landed, and entering with the Up arrow starts at the last enabled row. Tab or Enter chooses the focused row, and Escape or Shift+Tab closes the menu and returns the focus to the button that opened it; choosing a row does the same.
• In a dropdown, Enter, Space or the Up arrow opens the list and Enter chooses; the keyboard stays on the trigger or in the search field while the highlight moves, and Escape closes.
• In a segmented switch, tabs or a set of option cards, the arrow keys and Home and End step to the next enabled choice and wrap, skipping the disabled ones; the keyboard follows the selection as it changes. Only the chosen tab, segment or card is in the keyboard order; before a card is chosen, the first enabled card is.
• In a stepper, the up and down arrows change the value by one, Page Up and Page Down by five, and Home and End jump between the limits; where a limit is open-ended, the matching key does nothing.
• A keycap shown beside a control is a hint: it is not read out as part of the control's name, so a screen reader announces New chat, not the keys. Keycaps spell chords the way your platform writes them.

Questions, answered

What do the keycaps on menu rows mean?

They show the row's own keyboard shortcut, so the keys can be learned while you work. A keycap is a hint rather than part of the control: it is not read out as the control's name, so a screen reader announces the label alone. The shortcuts that work anywhere are listed in Keyboard shortcuts.

How do I choose a menu row without the mouse?

Open the menu, walk the rows with the arrow keys, Home and End (the walk wraps at the ends and steps over disabled rows), then press Tab or Enter to choose the focused row. Escape or Shift+Tab closes the menu and puts the focus back on the button that opened it.

Why did my menu stay open when I moved the pointer away?

Menus stay open until you choose a row, press Escape or click elsewhere; moving the pointer away does not close them. Where a menu is set to watch the pointer, it waits a short grace first, so the trip from the button into the list, or a small overshoot on the way, never closes it.

When does a dropdown show a search box?

When its list holds more than eight options. Type to filter; the arrow keys move the highlight while the keyboard stays in the field. A shorter list shows no search field, so the arrows alone walk it.

Why can I not choose a greyed-out option?

A disabled option never responds: the arrow keys and the pointer step over it, and choosing it is refused. If the whole dropdown refuses to open, the control itself is disabled.

Does clicking the text beside a checkbox tick it?

Yes. Clicking the words beside a checkbox asks for the new state just as clicking the box does. While the checkbox is disabled, its label stops responding too.

What happens when I click a switch that is half on?

The click asks for the whole group to be on. A group switch rests in its halfway state when only part of the group is on, so a click completes the group instead of turning the rest off.

Why is a whole segmented switch locked?

Every segment locks while a change that switching would interrupt is being saved or fetched, and the switch unlocks when it settles. A single unavailable segment instead explains itself when you point at it.

How do I change a number without typing it in?

Focus the value and work the keys: the up and down arrows change it by one, Page Up and Page Down by five, and Home and End jump from one limit to the other. Where a limit is open-ended, the matching key does nothing. The buttons beside the value do the same by clicks, and grey out at the limits.

What does the counter in a text field show?

The characters used, then the limit, in the form 5 / 240. A field without a limit shows no counter.

Why did a button swap its icon for a ring?

The button is working. The ring replaces its icon while the action runs, and the button keeps its name for assistive technology, so it still reads as itself. Wait for the ring before pressing again.