# Snippets

Use snippets in Xena UI

Examples of using snippets with Xena DS components

### Normal input (single line)

```html preview
<xena-input>
  <xwc-snippet id="xwc-snippet" key="mock-key" multilines="false" slot="suffix"></xwc-snippet>
</xena-input>

<script>
    const component = document.getElementById('xwc-snippet');
    const input = component.parentElement;
    component.addEventListener('valueChange', (ev) => {
        console.log('valueChange event', ev);
        input.value = ev.detail;
    })
</script>
```

### Multiline input

```html preview
<xena-textarea>
  <xwc-snippet id="xwc-snippet-multiline" key="mock-key-multiline" multilines="true" slot="tools"></xwc-snippet>
</xena-textarea>

<script>
    const component = document.getElementById('xwc-snippet-multiline');
    const textarea = component.parentElement;
    component.addEventListener('valueChange', (ev) => {
        console.log('valueChange event', ev);
        textarea.value = ev.detail;
    })
</script>
```

### No snippets available

```html preview
<xena-input>
  <xwc-snippet id="xwc-snippet-nosnippets" key="mock-key-nosnippets" slot="suffix"></xwc-snippet>
</xena-input>
```

Use snippet-manager
```html preview
  <xwc-snippet-manager key="mock-key-nosnippets" multilines="false"></xwc-snippet>
```