Item
Description
<vaadin-item> is a Web Component providing layout for items in tabs and menus.
<vaadin-item>Item content</vaadin-item>Selectable
<vaadin-item> has the selected property and the corresponding state attribute.
Currently, the component sets the selected to false, when disabled property is set to true.
But other than that, the <vaadin-item> does not switch selection by itself.
In general, it is the wrapper component, like <vaadin-list-box>, which should update
the selected property on the items, e. g. on mousedown or when Enter / Spacebar is pressed.
Styling
The following shadow DOM parts are available for styling:
| Part name | Description |
|---|---|
checkmark |
The graphical checkmark shown for a selected item |
content |
The element that wraps the slot |
The following state attributes are available for styling:
| Attribute | Description |
|---|---|
active |
Set when the item is pressed down, either with mouse, touch or the keyboard. |
disabled |
Set when the item is disabled. |
focus-ring |
Set when the item is focused using the keyboard. |
focused |
Set when the item is focused. |
selected |
Set when the item is selected |
See Styling Components documentation.
Properties
disabled
Type: boolean
If true, the user cannot interact with this element.
label
Type: string | undefined
String that can be set to visually represent the selected item in vaadin-select.
selected
Type: boolean
If true, the item is in selected state.
value
Type: string
Submittable string value. The default value is the trimmed text content of the element.