FeaturedNew
TagsTag Input Chips
A text field that turns typed values into removable chips, with the chips wrapping above the input.
#tags#chips#input
3 frameworksAdvanced
Loading…
A wrapping row of toggle chips for faceted filtering, each carrying its pressed state.
<!--
Each filter is a toggle button carrying aria-pressed - that is what tells a
screen reader the chip is on, since colour alone never can.
-->
<div class="w-full">
<div class="flex flex-wrap gap-2">
<button type="button" aria-pressed="true" class="rounded-full border border-blue-600 bg-blue-600 px-3 py-1 text-sm font-medium text-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900">Remote</button>
<button type="button" aria-pressed="false" class="rounded-full border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800 dark:focus-visible:ring-offset-gray-900">Full-time</button>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
optionsrequired | string[] | - | Options |
defaultActive | string[] | [] | Default active |
onChange | (active: string[]) => void | - | On change |
className | string | - | Additional classes merged onto the root element. |
Each filter is a button with `aria-pressed`, so its on/off state reaches a screen reader rather than living in colour alone; a clear-all link appears once anything is active. Drive selections through `onChange`.