import { Story, Meta, html } from '@open-wc/demoing-storybook';
import '@lion/input/lion-input.js';
import '@lion/button/lion-button.js';

# Content inside fields

Due to our custom inputs being Web Components, it is possible to put HTML content inside an input.
For example if you want to add a button as a prefix or suffix.

<Story name="Buttons Within lion fields">
  {html`
    <lion-input label="Prefix and sufix">
      <lion-button slot="prefix" type="button">prefix</lion-button>
      <lion-button slot="suffix" type="button">sufix</lion-button>
    </lion-input>
  `}
</Story>

```html
<lion-input label="Prefix and sufix">
  <lion-button slot="prefix" type="button">prefix</lion-button>
  <lion-button slot="suffix" type="button">sufix</lion-button>
</lion-input>
```