Chip
A compact filter or applied-state label that can be selected, linked, or removed.
Try it
Selected linked filter
A current category filter.
Use it
Working invocation
This code creates the configuration shown above. Copy the template and the required Python context together.
{% include "brickwork/components/_chip.html" with label=label href="?status=open" selected=selected variant=variant %}from django import forms
class _CountryForm(forms.Form):
country = forms.ChoiceField(choices=(("gb", "United Kingdom"), ("ie", "Ireland"), ("pt", "Portugal")))
__FORM__ = _CountryForm()
context = {'label': 'Open', 'selected': True, 'variant': 'info'}
context['form'] = __FORM__Guide
Add it to your project
- Supply `label`.
- Include with `href` for a linked filter, or without it for a button-like chip.
- Initialise interactions only if `dismissible` is needed.
Options
Public API
| Option | Type | Default | Required | Description |
|---|---|---|---|---|
| label | str | Not set | Yes | Chip text. Constraint: Use concise visible text that identifies the control or measurement. |
| variant | str | neutral | No | Status tint. Allowed: neutral, info, success, warning, danger. Constraint: Use one of the documented variants; use `danger`, not an invented `error` severity. |
| selected | bool | False | No | Selected state. Constraint: Use values that occur in the option records and match `multiple`. |
| dismissible | bool | False | No | Enhanced removal control. Constraint: No additional package-level validation is documented beyond this option's stated type and its role in the component. |
| size | str | md | No | Fixed scale. Allowed: sm, md. Constraint: Use one of the documented size choices; unsupported values are not a responsive substitute. |
| href | str | Not set | No | Renders as a link; selected uses aria-current. Constraint: Use a valid navigable URL and do not combine it with submit-only button fields. |
Behaviour
Accessibility and responsive behaviour
- Accessibility
- Selected buttons use `aria-pressed`; selected links use `aria-current`; the text carries meaning beyond colour.
- Responsive
- No breakpoint switch.
- Without JavaScript
- Chip content remains usable; the removal control is hidden until JavaScript starts.
Need help?
Troubleshooting
Contract check: uses aria-current="true". Dismiss control is icon-only with a translated
Keep the chip label present when it is dismissible; the package gives its close control the translated accessible name.