# action

## Overview

A `list-item` supports the `action` attribute, making it clickable.

## Standard Attributes

### `on-press`

**Required**

**Default**: unset

**Shorthand supported?** `true`

{% content-ref url="../../../xml-fields/on-press" %}
[on-press](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-press)
{% endcontent-ref %}

#### Example: Shorthand syntax

```xml
<list>
    <list-item on-press="$:doSomething()" />
</list>
```

#### Example: Longhand syntax

```xml
<list>
    <list-item>
        <action icon="my-icon-name" on-press="$:doSomething()" />
        <!-- or -->
        <!-- With dynamic list-items you can pass the selected item as a parameter via $selection -->
        <action icon="my-icon-name" on-press="$:doSomething($selection)" />
    </list-item>
</list>
```

{% hint style="info" %}
The `on-press` attribute has no effect if the `bind` attribute is set.
{% endhint %}

## Advanced Attributes

### `icon`

**Optional**

**Type**: `string`

**Default**: unset

**Shorthand supported?** `true`

The icon to display on the right-hand side of the list-item. The icon can be a one of JourneyApps' supported icons.

#### Example: Shorthand syntax

```xml
<list>
    <list-item on-press-icon="fa-plus" on-press="$:doSomething()" />
</list>
```

#### Example: Longhand syntax

```xml
<list>
    <list-item>
        <action icon="fa-plus" on-press="$:doSomething()" />
    </list-item>
</list>
```

### `validate`

**Optional**

**Type**: `boolean`

**Default**: `false`

**Shorthand supported?** `false`

Whether to run field validation before calling the associated `on-press` (see above). Can be either `true`, `false`, or the result of a function, e.g. `$:shouldBeValidated()`.

```xml
<list>
    <list-item>
        <action icon="fa-plus" on-press="$:doSomething()" validate="true" />
    </list-item>
</list>
```