lion/packages/form-integrations/docs/50-content-inside-fields.md

Content inside fields

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.

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>
`;