# id

**Optional**

**Type**: `string`

**Default**: unset

An `id` can be assigned to a UI component, which then targets the specific component and enables calling [component methods](https://docs.journeyapps.com/reference/js-ts-apis/component#component-methods) on it from JavaScript/TypeScript.

#### Example - `id` on a `text-input`

{% code title="main.view\.xml" %}

```xml
<var name="first_name" type="text"/>

<text-input id="first-name-input" label="First name" bind="first_name" />
```

{% endcode %}

{% code title="main.js" %}

```javascript
function focusInput() {
    // call a component method to programatically focus the text-input
    component.textInput({id: 'first-name-input'}).focus();
}
```

{% endcode %}