<dy-grouped-picker>
A compact picker for editing several independent values. Each top-level option defines a group, and selecting one of its children emits the group key and selected value.
Example
Loading...
<dy-grouped-picker
.placeholder=${"Select filters"}
.value=${{"status":"Open","priority":"High"}}
.renderValue=${(value) => Object.values(value || {}).join(' · ')}
.options=${ [ { "label": "Status", "value": "status", "children": [{"label":"Open"},{"label":"Closed"}] }, { "label": "Priority", "value": "priority", "children": [ {"label":"High"}, {"label":"Medium"}, {"label":"Low"} ] } ] }
@change=${(evt) => evt.target.value = { ...evt.target.value, [evt.detail.group]: evt.detail.value }}></dy-grouped-picker>
The component is controlled: update value after receiving change. Its keys correspond to each
group's value. A child option without a value uses its label as the selected value. By default,
the picker displays the first group's selected label; use renderValue to summarize multiple groups.
API
Shadow DOM; Extends GemElement
Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
placeholder(placeholder) |
Yes | string |
disabled(disabled) |
Yes | boolean |
borderless(borderless) |
Yes | boolean |
fit(fit) |
Yes | boolean |
options |
Yes | GroupedPickerOption[] |
value |
Yes | GroupedPickerValue |
renderValue |
Yes | (value?: GroupedPickerValue) => string | TemplateResult | undefined |
change |
Emitter<GroupedPickerChange> |
Instance Methods
| Method | Type |
|---|---|
showPicker |
() => void |
Other
| Type | Value |
|---|---|
| Event | change |
| CSS State | active |