> Markdown version of [Interaction](https://vaadin.com/docs/v24/styling/lumo/lumo-style-properties/interaction). Section index: [llms.txt](https://vaadin.com/docs/v24/styling/llms.txt)

# 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.

## <a id="cursor"></a>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 |

## <a id="pointer-focus-ring"></a>Pointer Focus Ring (since V24.7)

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`