Clickable chip
React componentSelect and remove compact filters without losing context.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
selected | boolean | undefinedDefault: false | See the typed definition and working example for this option. |
onRemove | (() => void) | undefined | See the typed definition and working example for this option. |
removeLabel | string | undefinedDefault: "Remove filter" | See the typed definition and working example for this option. |
disabled | boolean | undefined | Disables interaction (or date matchers for DatePicker). |
name | string | undefined | Field name used in form submission. |
type | "submit" | "reset" | "button" | undefined | Standard React / HTML attribute passed to the underlying element. |
value | string | number | readonly string[] | undefined | Controlled value. Pair with its change callback. |
defaultChecked | boolean | undefined | Standard React / HTML attribute passed to the underlying element. |
defaultValue | string | number | readonly string[] | undefined | Initial value for uncontrolled usage. |
className | string | undefined | Additional CSS class names. |
id | string | undefined | Standard React / HTML attribute passed to the underlying element. |
style | CSSProperties | undefined | Inline styles, including CSS custom property overrides. |
rel | string | undefined | Standard React / HTML attribute passed to the underlying element. |
children | ReactNode | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onBlur | FocusEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onChange | ChangeEventHandler<HTMLButtonElement, Element> | undefined | Standard React / HTML attribute passed to the underlying element. |
onError | ReactEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
onClick | MouseEventHandler<HTMLButtonElement> | undefined | Standard React / HTML attribute passed to the underlying element. |
Accessibility & interaction
Maintain an understandable accessible name and preserve visible focus for all actions.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Selection uses aria-pressed; removal is a separate sibling button. The parent owns selection and removal state.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.