# Filter chips
> Multi-select filter chips: selecting floods a chip with dots from the click point and draws a check. Submits one value per chip.
- Element: `<hf-chips>`
- React: `import { HfChips } from "@/components/lumesec/hf-chips"`
- Collection: Pixel HD (https://elements.lumesec.ai/components/pixel-hd)
- Registry item: https://elements.lumesec.ai/r/hf-chips.json
- Page: https://elements.lumesec.ai/components/pixel-hd/chips



Live preview: https://elements.lumesec.ai/view/hf-chips

```html
<hf-chips name="lang" label="Languages" value="TypeScript,Rust"></hf-chips>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/hf-chips
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/hf-chips.json
```

## Usage

React:

```tsx
import { HfChips } from "@/components/lumesec/hf-chips";

export function Example() {
  return (
    <HfChips name="lang" label="Languages" value="TypeScript,Rust" />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/hf-chips.js"></script>

<hf-chips name="lang" label="Languages" value="TypeScript,Rust"></hf-chips>
```

## Behaviour

Selecting a chip floods it with dots from where you clicked and draws a pixel check; Clear empties them all. Submits one form value per selected chip.

## API reference

### Attributes

| Attribute | React prop | Type     | Default                                                          | Description                                                                                                                              |
| --------- | ---------- | -------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `options` | `options`  | `string` | `TypeScript:128,Python:96,Rust:41,Go:37,SQL:22,Shell:18,Swift:9` | Comma-separated chips as `Label:count`. The count is optional and shown after the label. Read once on connect.                           |
| `value`   | `value`    | `string` | `TypeScript,Rust`                                                | Comma-separated labels of the selected chips, matched exactly. Observed: a change updates the selection. Reflects the current selection. |
| `label`   | `label`    | `string` | `Languages`                                                      | Heading text. Read once on connect.                                                                                                      |
| `name`    | `name`     | `string` | —                                                                | Form field name used when the element is inside a form.                                                                                  |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail                | Description                                                                                             |
| -------- | ---------- | --------------------- | ------------------------------------------------------------------------------------------------------- |
| `change` | `onChange` | `{ value: string[] }` | Fires when the user toggles a chip or presses Clear. `value` lists the selected labels in option order. |

### Properties

| Property              | Type                                  | Description                                                                                             |
| --------------------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------- |
| `value`               | `string[]`                            | Selected labels. Setting accepts an array or a comma-separated string and writes the `value` attribute. |
| `options` (read-only) | `{ label: string; count?: string }[]` | The parsed `options`.                                                                                   |
| `form` (read-only)    | `HTMLFormElement \| null`             | The owning form, from `ElementInternals`.                                                               |
| `name` (read-only)    | `string \| null`                      | The `name` attribute. There is no setter; set the attribute instead.                                    |

## Accessibility

* Each chip is a native `<button>` with `aria-pressed` reflecting its state, inside a `role="group"` container that has no label.
* The Clear button shows the selected count and is disabled when nothing is selected.
* The fill and check are drawn on an `aria-hidden` canvas.
* Form-associated through `ElementInternals`.
* With `name`, submits one entry per selected chip under that name; without a name the internal value is the comma-joined labels. There is no validation, and form reset and `disabled` are not handled.
* Reduced motion: a chip fills and draws its check at once instead of flooding from the click point; the hover tint still eases.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground`, `--lumesec` and `--muted-foreground`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent`, `--ui-fg` and `--ui-muted`.

## Notes

* Setting `value` through the attribute or the property does not fire `change`.
* Omitting `value` selects TypeScript and Rust; `value=""` starts with nothing selected.
* Chips wrap to the host's width.