Pills are designed to be used for filtering content in large datasets.
By providing a list of options, the q2-pill component allows you to make a selection from a dropdown. If you add the multiple attribute, you can make multiple selections.
For option lists exceeding five options, we recommend leveraging Tecton's action sheets functionality by adding the hoist attribute to q2-pill to prevent any potential scroll issues and provide a smoother user experience. For more information, see our guide on using action sheets.
<q2-pill label="Pill with options" multiple>
<q2-option role="option" value="1">
Option 1
</q2-option>
<q2-option role="option" value="2">
Option 2
</q2-option>
<q2-option role="option" value="3">
Option 3
</q2-option>
<q2-option role="option" value="4">
Option 4
</q2-option>
<q2-option role="option" value="5">
Option 5
</q2-option>
</q2-pill>You may provide multiple pills to display a number of possible data points to filter by.
<q2-pill label="Debits"></q2-pill>
<q2-pill label="Credits" active></q2-pill>
<q2-pill label="Account Types">
<q2-option role="option" value="Checking">
Checking
</q2-option>
<q2-option role="option" value="Savings">
Savings
</q2-option>
<q2-option role="option" value="Retirement">
Retirement
</q2-option>
<q2-option role="option" value="Investments">
Investments
</q2-option>
</q2-pill>
<q2-pill label="Checks"></q2-pill>The popover in q2-pill provides slots for custom content to be displayed persistently at the top and/or bottom of the popover menu.
Slot names:
Example HTML
<q2-pill label="Pill with Popover Slots">
<q2-option value="1" display="Option 1">Option 1</q2-option>
<q2-option value="2" display="Option 2">Option 2</q2-option>
<q2-option value="3" display="Option 3">Option 3</q2-option>
<q2-option value="4" display="Option 4">Option 4</q2-option>
<q2-card slot='popover-top' avatar-icon="person-add" title="Add New User" description='Top Slot Content' type='clickable' is-small style='--tct-card-box-shadow: none'></q2-card>
<div slot='popover-bottom' style='display: flex; width: 100%; height: 40px; justify-content: center; align-items: center; font-size: larger;'>Bottom Slot Content</div>
</q2-pill>The popover slots are not compatible when the hoist attribute is being used with q2-pill.
The q2-pill element has multiple slots that can be used to insert custom content into the component.
An optional slot to display custom content persistently at the bottom of the popover. This is not compatible with the action sheet workflow.
An optional slot to display custom content persistently at the top of the popover. This is not compatible with the action sheet workflow.
The q2-pill element has one or more properties that support text localization. Those properties are indicated by the localizable badge in the description.
activeDetermine if the elements is in the selected state, with values.
borderlessIndicates that the pill has no border
disabledIndicates the pill cannot be focused or interacted with.
hoistInstructs the component to use the action sheet workflow for displaying its options.
For more information, see Action Sheets.
labelThe text that populates the label.
maxLengthmax-lengthThe maximum number of characters to display before ellipcizing.
Limitless by default.
multipleEnables the multi-select ability for the dropdown.
Only applicable when options are provided.
openDetermine whether the popover is open or closed.
optionListLabeloption-list-labelDetermines the label that is applied to the option list for accessibility purposes.
popoverAlignmentpopover-alignmentAligns the popover dropdown to the left or right side of the input field.
popoverDirectionpopover-directionForce the direction of the popover dropdown when it opens. If no value is passed, the component will auto-detect the direction based on available space.
popoverMaxHeightpopover-max-heightForce the maximum height of the popover. This value will be interpreted as pixels. If no value is passed, or the value exceeds available space, the component will auto-detect the maximum height based on available space.
selectedOptionsselected-optionsA list of the selected options on the element.
themeThe color of the element when in the active state.
valueThe value emitted when the component is selected.
The q2-pill element exposes events that can be used to send and receive data from the component based on user interaction.
Emitted when the pill is clicked or the selected options change.
When multi-select is enabled, value will be undefined.
{ value: string; values: IOptionValue[]; active: boolean; }If an event handler is bound to the element using:
onchange property - The default handler will not fire, and the value must be updated in the custom handler.addEventListener("change") method - The default handler will fire alongside the custom handler.The q2-pill element exposes methods that can be used to perform various actions on the component.
Emulates clicking the <button> to hide the popover if it is visible.
closePopover() => Promise<void>Emulates clicking the <button> to display the popover if it is hidden.
openPopover() => Promise<void>Emulates clicking the <button> to display the popover and selecting the option(s) with the specified value(s).
If multi-select is enabled and the closePopover argument is true (default), the popover will be closed
after the option(s) are selected.
setValue(values: string | string[], options?: { closePopover?: boolean; }) => Promise<void>Use standard color instead of lighter variant
Initial Release
The following CSS variables are available to override the default theme styles of the q2-pillcomponent.
Many Tecton components consume other components to maintain visual and functional consistency. If you are looking for a CSS variable you think should exist but are not seeing it, it may be defined in one of the dependent components below. Either way, if you think it's something we should expose more conveniently, let us know!