Filter chips · Pixel HD component

<hf-chips>· loading

Playground

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

Loading <hf-chips>

Props

optionsremounts

valuelive

labelremounts

nameremounts

<HfChips
  options="TypeScript:128,Python:96,Rust:41,Go:37,SQL:22,Shell:18,Swift:9"
  value="TypeScript,Rust"
  label="Languages"
  name="lang"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-chips

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/hf-chips.json

Usage

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

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

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

optionsReact propoptionsTypestringDefaultTypeScript: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.

valueReact propvalueTypestringDefaultTypeScript,Rust

Comma-separated labels of the selected chips, matched exactly. Observed: a change updates the selection. Reflects the current selection.

labelReact proplabelTypestringDefaultLanguages

Heading text. Read once on connect.

nameReact propnameTypestring

Form field name used when the element is inside a form.

Events

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

changeReact proponChangeDetail{ value: string[] }

Fires when the user toggles a chip or presses Clear. value lists the selected labels in option order.

Properties

valueTypestring[]

Selected labels. Setting accepts an array or a comma-separated string and writes the value attribute.

options (read-only)Type{ label: string; count?: string }[]

The parsed options.

form (read-only)TypeHTMLFormElement | null

The owning form, from ElementInternals.

name (read-only)Typestring | 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.

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.

<hf-wheel>

Time picker wheelhf-wheel

<hf-range>

Range filterhf-range

<hf-number>

Number stepperhf-number

<hf-swipe>

Slide to confirmhf-swipe

Related