About this set
Toolbars that sit above a list of results and combine search with the controls that shape it. Search, chips and sort is a job board toolbar with a search field, a Sort by select with a visible label, a row of checkbox chips for Remote, Full-time, Contract, Senior and Design, and a Show 128 roles button that applies them. Checked chips turn blue and show a tick, so the state never depends on colour alone. Removable active filters is a recipe search that keeps the query in the field, shows the result count and lists each active filter as a link that removes it, plus a Clear all link; the current filters travel with the form as hidden inputs. Both are ordinary GET forms, so they work with server-rendered pages without JavaScript, and a script can later apply changes instantly if you want that. Use the chip toolbar for catalogues and job boards and the active-filter row wherever filters are chosen in a sidebar or drawer.
What’s included
- Checkbox chips with a tick on the checked state
- Sort select with a visible label
- Removable filter links with descriptive accessible names
- Hidden inputs keep active filters when the query changes
- Bootstrap version on .btn-check, .form-select and .btn
Accessibility
Both toolbars are forms with role="search". The chips are real checkboxes grouped in a fieldset with a hidden legend, and the sort select is wrapped in its visible label. Each remove link is named like Vegetarian, remove filter, so the visible text comes first. Chips, links and buttons draw a 2px outline on keyboard focus, the fields get an accent ring, and transitions are removed under prefers-reduced-motion.
Customise it
Change --fb-accent, --fb-soft and --fb-line on .fb for colour; the chip height is set on .fb-chip span. Bootstrap maps the same properties onto --bs-btn-* variables for the chips and tags; in Tailwind edit the --color-fb-* theme colours.
