UnreviewedfacetsOptional UnreviewedplacementPreferred placement of the root filter menu relative to its trigger. The menu auto-flips vertically and clamps horizontally when needed.
Optional UnreviewedoffsetGap in pixels between the trigger and the filter menu.
Optional UnreviewedvalueControlled value record, keyed by facet. When provided, update it through
onValueChange. Leave it undefined for uncontrolled use; releasing control
retains the latest applied record. Inline records work correctly. For a
derived record, useMemo can avoid an extra component render when the parent
renders with unchanged inputs. Pass records held in state directly.
import { useMemo } from 'react'
import { SelectFaceted, type SelectFacetedValue } from '@antadesign/anta'
function StatusFilter({ status, onChange }: {
status: string
onChange: (value: SelectFacetedValue) => void
}) {
const value = useMemo(() => ({ status }), [status])
return <SelectFaceted
facets={[{ key: 'status', kind: 'single', label: 'Status',
options: ['open', 'closed'] }]}
value={value} onValueChange={onChange} />
}
Optional UnrevieweddefaultInitial value for uncontrolled use.
Optional UnreviewedonFires after any facet changes. value is the whole new record (a facet key →
that facet's value; a cleared facet is absent). attrs says what changed:
{ facet, kind, value } for a single facet edit, or { all: true } for the
"Clear all" row — narrow on 'all' in attrs before reading facet.
Optional UnreviewedlabelDefault trigger's button label.
Optional UnreviewediconDefault trigger's leading icon.
Optional UnreviewedsizeDefault trigger's button size.
Optional UnreviewedpriorityDefault trigger's button priority.
Optional UnrevieweddisabledDisable the whole control.
Optional UnreviewedtoneDefault option-row tone in facet flyouts. An option's own tone wins.
Optional UnreviewedtoneApply the default row tone in every state, or only to selected rows. An
option's own toneScope wins.
Optional UnreviewedsearchableAdds a search field at the top of the root menu. It searches the options of
every single and multiple facet in one list. For example, "alice" can
appear under application-defined Assignee and Owner facets. text and
custom facets remain available when the search is empty. Each facet uses
its filter function when supplied, or the built-in substring match.
Optional UnreviewedsearchPlaceholder for the global search field.
Optional UnreviewedclearableShow the per-facet "Clear" row and the "Clear all" row.
Optional UnreviewedclearLabel for the "Clear all" row.
Optional UnreviewedrenderReplaces the default Button with a trigger returned from this function.
Receives a SelectFacetedTriggerState. Return exactly one focusable element:
the menu is positioned relative to that element and opens when it is clicked.
Add aria-haspopup={searchable ? 'dialog' : 'menu'} and
aria-expanded={state.open} to the returned element, on a role that
supports them (an Anta Button already carries role="button"; otherwise
add role="combobox"). className, style, and other trigger props apply
only to the default Button, so add styling and attributes to the returned
element.
Optional UnreviewedclassAdds CSS classes to the root element and preserves its existing classes.
Optional UnreviewedstyleInline CSS styles on the root element.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute, shown as a browser tooltip on hover.
Optional UnreviewedslotNamed slot in a parent web component, such as slot="header" in a <Dialog>.
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Categories to filter by. Each facet has a
kindthat determines its editor.