Form Controls

TagsInputField

A form control for inputting and managing multiple tags or keywords.

Enter your tags here

Anatomy

The class attribute values represent part names, and conditional indicates elements that are rendered conditionally. Other attributes represent their corresponding props.

Svelte
<div class="whole">
  <div class="top" conditional>
    <label class="label" conditional>
      {label}
      <span class="extra" conditional>{extra}</span>
    </label>
    <span class="aux" conditional>{aux}</span>
  </div>
  <div class="middle">
    <span class="left" conditional>{left}</span>
    <TagsInput bind:values bind:element {...deps.svsTagsInput} />
    <span class="right" conditional>{right}</span>
  </div>
  <div class="bottom" conditional>{bottom}</div>
</div>

Props

Type

(value) indicates the default value for the prop.

TypeScript
interface TagsInputFieldProps {
  label?: string;
  extra?: string;
  aux?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
  left?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
  right?: Snippet<[string[], string, HTMLInputElement | undefined]>; // Snippet<[values,variant,element]>
  bottom?: string;
  descFirst?: boolean; // (false)
  values?: string[]; // bindable
  min?: TagsInputFieldCountValidation;
  max?: TagsInputFieldCountValidation;
  constraints?: TagsInputFieldConstraint[];
  validations?: TagsInputFieldValidation[];
  name?: string;
  element?: HTMLInputElement; // bindable
  styling?: SVSClass;
  variant?: string; // bindable (VARIANT.NEUTRAL)
  deps?: TagsInputFieldDeps;
}

Additional Props

  • descFirst - When true, the bottom element is moved between the top element and the middle element
  • min - Minimum number of tags required
  • max - Maximum number of tags allowed
  • constraints - Array of constraint functions used to restrict tag values
  • validations - Array of validation functions used to validate tag values
  • name - The name attribute for form submission

Styling

To learn more, see Styling.

Variant Management

In the initial state or when there is no input value, neutral is applied. If constraints do not allow the input, inactive is applied. After a value is entered, the variant switches to active if validation succeeds, or remains neutral temporarily if validation fails. During form validation, inactive is applied when validation fails. If the variant prop is specified, the specified value is used instead of neutral.

Default Class Name

svs-tags-input-field

Exports

Types

TypeScript
interface TagsInputFieldDeps {
  svsTagsInput?: Omit<TagsInputProps, TagsInputReqdProps | TagsInputBindProps>;
}
type TagsInputFieldConstraint = (value: string, validity: ValidityState) => string | undefined;
type TagsInputFieldValidation = (values: string[], validity: ValidityState) => string | undefined;
type TagsInputFieldCountValidation = { value: number, message: string };
type TagsInputFieldReqdProps = never;
type TagsInputFieldBindProps = "values" | "variant" | "element";

Others

No additional exports are available.

Examples

The example code uses Tailwind CSS along with SVSClass.

Basic

Enter your tags here

With Interactive Variant

Preset for Demo
Enter variant as you like
Enter your favorites