lion/packages/form-integrations/docs/50-content-inside-fields.md
Jorge del Casar 98f1bb7e1c fix: normalize dependencies
Co-authored-by: jorenbroekema <Joren.Broekema@ing.com>
2021-01-06 10:53:38 +01:00

25 lines
682 B
Markdown

[//]: # 'AUTO INSERT HEADER PREPUBLISH'
# Content inside fields
```js script
import { html } from '@lion/core';
import '@lion/input/lion-input.js';
import '@lion/button/lion-button.js';
export default {
title: 'Forms/System/Field integrations',
};
```
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.
```js preview-story
export const ButtonsWithFields = () => html`
<lion-input label="Prefix and suffix">
<lion-button slot="prefix" type="button">prefix</lion-button>
<lion-button slot="suffix" type="button">suffix</lion-button>
</lion-input>
`;
```