Lumo Interaction
The user may be made aware of the focus of an application with the use of a cursor, or with a focus ring. The Lumo properties may be set to improve the user experience with these visual clues, depending on the situation.
Cursor
Lumo defines a CSS custom property that you can use to adjust the way in which your application signals clickable elements to users of pointer devices — typically a mouse.
You can either follow the web approach and use the pointer (i.e., hand) cursor for clickable items, or take the desktop approach and use the default (i.e., arrow) cursor.
| Description | CSS Custom Property |
|---|---|
Cursor | --lumo-clickable-cursor: |
Pointer Focus Ring
By default, Vaadin components show a focus ring only when the user navigates using the keyboard. You can enable a focus ring for pointer devices by setting the --lumo-input-field-pointer-focus-visible custom property to 1. This applies only to components with an input field, such as Text Field, Date Picker, etc.
4D15B095-CBCB-4E82-A82B-E5B2DA00EDE5