Single-select Filter
A filter chip for toolbars where exactly one option is always chosen.
Basic usage
Pass label, items, the controlled value, and onChange. The chip shows the
label and the chosen option, and the menu marks it with a check. Picking a row
closes the menu. There is no search, empty state, or select all; use
Multi-select Filter when people can pick several
values or clear the filter.
Default value
Pass defaultValue for the option that means no filter, such as all stages or
the default sort. At that value the chip is a dashed button with label and
iconStart. Any other value shows the label, the chosen option, and an X that
returns to defaultValue.
Icons and size
renderItemStart adds an icon to each row. Use size="small" in compact
toolbars and tables.
Usage
items needs at least one entry, and value, defaultValue, and onChange are
typed to its ids. A value that matches no item shows the first item. Use
align="end" when the chip sits at the trailing edge of a toolbar.
Properties
Name of the filter, shown on the chip
Options, each { id, name }. Needs at least one
Id of the chosen option
Called with the id of the picked option
Option that means no filter. At this value the chip is dashed; otherwise it shows an X that returns here
Called when the menu opens or closes
Icon on the dashed chip at defaultValue
Icon or avatar before each row's label
Replaces each row's label in the menu
Chip size. Use small in compact toolbars and tables
Default: regular
Alignment of the menu relative to the chip
Default: start
Disables the chip
Default: false
Renders the menu in a portal. Set to false inside a dialog
Default: true
Classes for the outer wrapper