Pills input¶

Pills input allows users to enter multiple items, such as tags or email addresses, into a single input field.

Usage¶

Pill Input is a control that lets users enter text, transforming each entry into a distinct "pill". A new entry is added when the Enter key is pressed or when separated by commas or semicolons. Existing pills can be deleted as needed.

Pills input

When to use¶

To add tags to categorize content, making it easier for users to classify and find items based on keywords.
To enter email addresses or names, allowing users to easily add or remove recipients.
For selecting multiple options from a wide range of choices.

Best practices¶

Guide users with examples in the placeholder, like "Enter tags, separated by commas."
If needed, set a maximum number of pills to keep the interface clean.
Offer autocomplete suggestions as required.
Provide validation when necessary.

Design¶

Elements¶

Pills input elements

Label (optional), 2. Pills, 3. Container, 4. Message (optional)

Interaction states¶

Pills input interaction states

Label (optional)¶

Effective labeling helps users understand what information to enter.

Keep labels short and clear (should not be wider than the input field).
Mandatory fields are marked with an *-asterisk.
Labels can be placed on top of fields or to the left (in RTL languages). Prefer top placement of labels, since it provides a consistent left edge alignment, improving scannability.

Pills input label

Validation¶

Real-time validation can be implemented to ensure that entered text meets specific criteria.

Pills input validation

Responsive behavior¶

When space is limited, pills are stacked to ensure adaptability across various screen sizes.

Pills input responsive

Code¶

Usage¶

import { SiPillsInputComponent } from '@siemens/element-ng/pills-input';

@Component({
  imports: [SiPillsInputComponent, ...]
})

SiPillsInputComponent API Documentation¶

selector

si-pills-input

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Input Properties¶

Name	Type	Default	Description
disabled ¶	`boolean`	`false`	Whether the pills-input is disabled.
id ¶	`string`	`__si-pills-input-${SiPillsInputComponent.idCounter++}`	The identifier of the pills-input. Will be generated if not provided.
inputElementAriaLabel ¶	`TranslatableString`	$localize`:@@SI_PILLS_INPUT.INPUT_ELEMENT_ARIA_LABEL:Create item`	The aria-label for the inner input where users enter new items.
labelledby ¶	`string`	`${this.id()}-label`
placeholder ¶	`string`		The placeholder to be shown if no value is currently present.
readonly ¶	`boolean`	`false`	Whether the pills-input is readonly

SiPillsInputCsvDirective API Documentation¶

selector

[siPillsInputCsv]

Input Properties¶

Name	Type	Default	Description
pillsInputCsvItemRegex ¶	`RegExp`	`undefined`

Attributes and Methods¶

Name	Type	Default	Description
(readonly) separatorRegex ¶	`WritableSignal`<`RegExp`>	`SEPARATOR_REGEX`	Regex to split the input value into segments.

Types Documentation¶

SI_FORM_ITEM_CONTROL `InjectionToken`<`SiFormItemControl`> = ...¶ Variable

TranslatableString (`string` & `Translatable`)¶ Type alias Represents a translatable string. This can either be a translation key, e.g. `ACTIONS.EDIT` that will be automatically translated when displayed on the UI or a pre-translated string, e.g. `Edit` . Equivalent to a normal string in usage and functionality.

SiFormItemControl

¶

Interface

Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.

Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the `aria-describedby` attribute of their focusable elements. This property will be required with v48. errormessageId?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
The actual id of the control that should be used in the `for` attribute of a label. id?: (`string` \| `Signal`<(`undefined` \| `string`)>)¶
If the control is meant to be used a checkbox. This affects the label positioning. isFormCheck?: `boolean`¶
ID that should be assigned to the label element inside the SiFormItemComponent . If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute. labelledby?: (`null` \| `string` \| `Signal`<(`undefined` \| `string`)>)¶

Translatable ¶ import imported from @siemens/element-translate-ng

SiFormError

¶

Interface

Properties
key: `string`¶
message?: `string`¶
params: `any`¶

SiFormValidationErrorMapper

¶

Interface

Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.

Index signature: [ key: string ]: (undefined | string | (error: any) => string)¶

Properties
dateFormat?: (`TranslatableString` \| (error: { format: `string` }) => `TranslatableString`)¶
email?: (`TranslatableString` \| (error: { email: `boolean` }) => `TranslatableString`)¶
max?: (`TranslatableString` \| (error: { actual: `number`, max: `number` }) => `TranslatableString`)¶
maxDate?: (`TranslatableString` \| (error: { actual: `Date`, max: `Date` }) => `TranslatableString`)¶
maxLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
min?: (`TranslatableString` \| (error: { actual: `number`, min: `number` }) => `TranslatableString`)¶
minDate?: (`TranslatableString` \| (error: { actual: `Date`, min: `Date` }) => `TranslatableString`)¶
minLength?: (`TranslatableString` \| (error: { actualLength: `number`, requiredLength: `number` }) => `TranslatableString`)¶
numberFormat?: (`TranslatableString` \| (error: { numberFormat: `boolean` }) => `TranslatableString`)¶
pattern?: (`TranslatableString` \| (error: { pattern: (`string` \| `RegExp`) }) => `TranslatableString`)¶
required?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶
requiredTrue?: (`TranslatableString` \| (error: { required: `boolean` }) => `TranslatableString`)¶

Breakpoints

¶

Interface

Properties
lgMinimum: `number`¶
mdMinimum: `number`¶
smMinimum: `number`¶
xlMinimum: `number`¶
xxlMinimum: `number`¶

SiFormItemComponent

implements AfterContentInit, AfterContentChecked, OnChanges, OnInit, OnDestroy¶

Class

▶

Constructor
() => `{}`¶

Properties
container: (`null` \| `SiFormContainerComponent`<{ [ key: `string` ]: `AbstractControl`<`any`, `any`> } }>) = ...¶
controlElementRef: `Signal`<(`undefined` \| `ElementRef`<`HTMLElement`>)> = ...¶
Disables the automatic error printing. Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
errors: `WritableSignal`<`SiFormError`[]> = ...¶
fieldControl: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlNative: `WritableSignal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldControlQuery: `Signal`<(`undefined` \| `SiFormItemControl`)> = ...¶
fieldset: (`null` \| `SiFormFieldsetComponent`) = ...¶
formErrorMapper: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper`)> = ...¶
hasRequiredValidator: `WritableSignal`<`boolean`> = ...¶
The label to be displayed in the form item. It will be translated if a translation key is available. label: `InputSignal`<(`undefined` \| `null` \| `string`)> = ...¶
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area. Numbers will be converted to pixels. Using numbers is discouraged and might be dropped. Example: `labelWidth="100px"` labelWidth: `InputSignal`<(`undefined` \| `string` \| `number`)> = ...¶
labelWidthCssVar: `Signal`<(`undefined` \| `string`)> = ...¶
ngControl: `Signal`<(`undefined` \| `NgControl`)> = ...¶
previousErrors?: (`null` \| `ValidationErrors`)¶
printErrors: `Signal`<`boolean`> = ...¶
required: `Signal`<`boolean`> = ...¶
Defines that this form item is required for the overall form to be valid. requiredInput: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
requiredTestControl: `FormControl`<(`null` \| `string`)> = ...¶
requiredValidator: `Signal`<(`undefined` \| `RequiredValidator`)> = ...¶
validationErrorService: `SiFormValidationErrorService` = ...¶
validator?: (`null` \| `ValidatorFn`)¶

Accessors
get formItemErrormessageId: (`null` \| `string`)¶
get formItemId: (`null` \| `string`)¶
get formItemLabelledBy: (`null` \| `string`)¶

Methods

A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked¶

A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit¶

ngOnChanges

(changes: SimpleChanges) => void from OnChanges.ngOnChanges¶

A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.

Parameters
The changed properties. changes: `SimpleChanges`¶

A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy¶

A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit¶

updateRequiredState: () => void¶

updateValidationMessages: () => void¶

SiFormContainerComponent

<(TControl: { [ K in keyof TControl ]: AbstractControl })>¶

Class

▶

Constructor
() => `{}`¶

Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input. contentContainerBreakpoints: `InputSignal`<(`undefined` \| `Breakpoints`)> = ...¶
A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys. controlNameTranslateKeyMap: `InputSignal`<`Map`<`string`, `string`>> = `new Map<string, string>()`¶
In some scenarios, one may not want the form container to be responsible for the layout relevant `si-container-[xs\|...]` classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true. disableContainerBreakpoints: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46. disableErrorPrinting: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the `Validators` class like `min` , `max` or `required` . Use the input to set your own translate keys for the form validators you need. errorCodeTranslateKeyMap: `InputSignal`<(`undefined` \| `SiFormValidationErrorMapper` \| `Map`<`string`, `string`>)> = ...¶
Set the form entity to the container to enable the overall form validation on in the form container edit panel. form: `InputSignal`<(`undefined` \| `FormGroup`<`TControl`>)> = ...¶
formErrorMapper: `Signal`<{ [ key: `string` ]: (`undefined` \| `string` \| (error: `any`) => `string`) } }> = ...¶
hasParentContainer: `boolean` = ...¶
A custom width value to be applied to all labels. Example: `labelWidth="100px".` labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
A form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel. readonly: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶

Accessors
Indicates whether the content editor message shall be styled as warning. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid. get invalidFormContainerMessage: `boolean`¶
Indicates whether the user interacted with the form. Returns `true` , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise `false` . get userInteractedWithForm: `boolean`¶
Indicates whether content editor message shall be styled as success. Returns `true` , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid. get validFormContainerMessage: `boolean`¶

Methods

getControlNameTranslateKey

(controlName: string) => (undefined | string)¶

Parameters
controlName: `string`¶

SiFormFieldsetComponent

implements DoCheck¶

Class

▶

Constructor
() => `{}`¶

Properties
errors: `Signal`<`SiFormError`[]> = ...¶
formItems: `WritableSignal`<`SiFormItemComponent`[]> = ...¶
hasOnlyRadios: `Signal`<`boolean`> = ...¶
Switches all child inputs to inline mode inline: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
isRequired: `Signal`<`boolean`> = ...¶
The label for the entire fieldset. label: `InputSignal`<`string`> = ...¶
labelId: `string` = ...¶
Overrides the parent label width. labelWidth: `InputSignal`<(`undefined` \| `string`)> = ...¶
Adds a required marker to the label required: `InputSignalWithTransform`<`boolean`, `unknown`> = `false`¶
touched: `WritableSignal`<`boolean`> = ...¶
labelIdCounter: `number` = `0`¶

Methods

A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck¶

registerFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

unregisterFormItem

(item: SiFormItemComponent) => void¶

Parameters
item: `SiFormItemComponent`¶

Except where otherwise noted, content on this site is licensed under MIT License.