Tagify
Converts HTML input/textarea into Tags component.
Enable Component
Enable component from within your frontal.config.js as follows
Basic Usage
You can build your own using the previewer
Customize variables at:/library/extend/components/_tagify.scss
Component's defaults:/library/components/tagify/_defaults.scss
NameDefault valueNote
$dx-tagify-prefix'.tagify';
$dx-tagify-input-line-height1.5
$dx-tagify-input-border-radius.25rem
$dx-tagify-input-colorinherit
$dx-tagify-input-border-colorform-input-border
$dx-tagify-input-border-width1px
$dx-tagify-input-hover-colorform-input-hover-text-color
$dx-tagify-input-hover-background-colorform-input-hover-bg
$dx-tagify-input-hover-box-shadownull
$dx-tagify-input-hover-border-colorform-input-hover-border
$dx-tagify-input-focus-colorform-input-focus-text-color
$dx-tagify-spinner-size16px
$dx-tagify-spinner-border-width2px
$dx-tagify-tag-font-size0.875rem
$dx-tagify-tag-spacing-y.25rem
$dx-tagify-tag-spacing-x.375rem
$dx-tagify-tag-padding-y.25rem
$dx-tagify-tag-padding-x.375rem
$dx-tagify-tag-border-radius3px
$dx-tagify-tag-font-familynull
$dx-tagify-tag-font-weightnull
$dx-tagify-tag-transition.15s ease-in-out
$dx-tagify-tag-hover-box-shadownull
$dx-tagify-tag-edit-background-colortransparent
$dx-tagify-tag-invalid-edit-colorform-input-text-color
$dx-tagify-tag-invalid-edit-background-colortransparent
$dx-tagify-tag-invalid-edit-box-shadow0 0 0 2px danger-t-12 inset
$dx-tagify-dropdown-max-height300px
$dx-tagify-dropdown-padding-y8px
$dx-tagify-dropdown-padding-x8px
$dx-tagify-dropdown-border-width0
$dx-tagify-dropdown-border-colortransparent
$dx-tagify-dropdown-background-colorpopover-bg
$dx-tagify-dropdown-box-shadowproperty.get(popover-shadow)Requires @use "@library/sass/modules/property";
$dx-tagify-dropdown-edge-spacing.2rem
$dx-tagify-dropdown-border-radius4px
$dx-tagify-dropdown-item-border-radius4px
$dx-tagify-dropdown-item-padding-y10px
$dx-tagify-dropdown-item-padding-x8px
$dx-tagify-dropdown-item-line-height1
$dx-tagify-dropdown-item-colormenu-item-text-color

Make sure to read the Customize components and Understanding and using the design system guides.

{title}