Pills Input¶

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.

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 for pills input¶

• 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¶

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

Interaction states¶

Optional label¶

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.

Validation¶

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

Responsive behavior¶

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

Code¶

Usage¶

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

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