Tagged Field

<sw-tagged-field>

deprecated

Usage

<sw-tagged-field label="Label" :addOnKey="[13, ',']">
</sw-tagged-field>

Component properties

Property name Type Default
placeholder String
value Array
label String
disabled Boolean false
helpText String
addOnKey Array

Methods

Method name Parameters
createdComponent No parameters
dismissLastTag No parameters
dismissTag index
emitChanges No parameters
performAddTag event
noTriggerKey event

Imports

  • ./sw-tagged-field.html.twig
  • ./sw-tagged-field.scss

Mixins

  • validation

SASS variables

Variable name Value
$sw-tagged-field-border-radius $border-radius-default (4px)
$sw-tagged-field-color-border $color-steam-cloud ($color-gray-300)
$sw-tagged-field-color-background $color-white (#FFF)
$sw-tagged-field-color-label $color-kashmir ($color-darkgray-200)
$sw-tagged-field-font-family $font-family-default ('Source Sans Pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif)
$sw-tagged-field-input-color-text $color-gutenberg ($color-darkgray-200)
$sw-tagged-field-input-color-placeholder lighten($color-gutenberg, 25%)
$sw-tagged-field-color-error $color-crimson ($color-crimson-500)
$sw-tagged-field-disabled-color-background $color-light-gray ($color-gray-100)
$sw-tagged-field-disabled-color-text lighten($color-gutenberg, 40%)
$sw-tagged-field-transition-results all ease-in-out .2s
$sw-tagged-field-transition-tags all ease-in-out .15s

Twig blocks

  • sw_tagged_field_label
  • sw_tagged_field_tag_items
  • sw_tagged_field_input
  • sw_tagged_field_item_input
  • sw_tagged_field_indicators_helptext
  • sw_tagged_field_indicators
  • sw_tagged_field_inner
  • sw_tagged_field