dile-form-separator

Web Component to create a customizable separator in forms, allowing for an optional label and style adjustments.

Installation

npm i @dile/ui

Usage

Import the dile-form-separator component.

import '@dile/ui/components/form-separator/form-separator.js';

Use the component.

<dile-form-separator label="Section Title"></dile-form-separator>

Properties

• label: String, the text label displayed above the separator line. If not provided, no label is shown.

Attributes

• removeline: When set, removes the separator line.

CSS Custom Properties

You can customize it using CSS Custom Properties.

dile-form-separator demos

Default separator

<script type="module">
  import '@dile/ui/components/form-separator/form-separator.js';
</script>
<dile-form-separator label="Personal Information"></dile-form-separator>

Separator without label

<dile-form-separator></dile-form-separator>

Separator without line

<dile-form-separator label="No Line" removeline></dile-form-separator>

Styled separator

<style>
  .styled {
    --dile-secondary-dark-color: #8b0000;
  }
  html.dark-theme .styled {
    --dile-form-separator-color: #cb4444;
    --dile-form-separator-text-color: #fcc;
  }
</style>
<dile-form-separator class="styled" label="Styled Separator"></dile-form-separator>