Chip
A toggleable pill-shaped element for filters, tags, or multi-select options, with a selected state highlighted in accent-primary.
<arc-chip>Overview
Chip is a pill-shaped interactive element that toggles between selected and unselected. It suits picking one or more options from a visible set, such as filter chips, tag selectors, or interest pickers. The default appearance uses a bordered pill with muted uppercase text, and toggling to the selected state transitions the chip to an accent-primary border, matching text color, and a subtle blue-tinted background with a glow effect.
Standalone chips expose the button ARIA role with aria-pressed reflecting the toggle state. When placed inside an ancestor with role="listbox" or role="group", chips switch to the option role with aria-selected, so they fit listbox accessibility patterns when grouped. Keyboard interaction is handled with Enter and Space keys for toggling, and the chip is focusable via the tabindex attribute (automatically set to -1 when disabled). The slot accepts any inline content, though plain text labels suit the uppercase styling best.
Chip fires an arc-change event on every toggle, including both the value and selected state in the event detail. To manage a chip group, listen to arc-change on each chip and keep a set of selected values in your application state. The value prop is a machine-readable identifier separate from the visible label text.
Guidelines
When to use
- Use Chip for multi-select filter sets where users can pick zero or more options
- Set a unique `value` on each chip for programmatic identification distinct from the label
- Group related chips together and listen to `arc-change` on each to maintain a selection set
- Keep chip labels to one or two words to preserve the compact pill appearance
- Combine with a clear/reset action when using chips as active filters
When not to use
- Do not use Chip for mutually exclusive choices. Use SegmentedControl or RadioGroup instead
- Do not place long sentences inside a Chip; it breaks the compact pill layout
- Do not use Chip as a navigation element; it is an input control, not a link
- Do not nest interactive elements (buttons, links) inside the chip slot
- Avoid using chips without `value` props in a group; the change event needs identifiers to be useful
Features
- Pill-shaped toggle with `border-radius: full` and uppercase accent-font label styling
- Selected state: accent-primary border, matching text color, tinted background, and glow shadow
- Hover state brightens the border and elevates the background for unselected chips
- Focus-visible glow that layers over the selection glow
- ARIA `button` role with `aria-pressed` standalone; `option` role with `aria-selected` inside a listbox or group
- Fires `arc-change` with `{ value, selected }` detail on every toggle interaction
- Keyboard toggle via Enter and Space with automatic tabindex management
- Disabled state at 40% opacity with pointer events blocked
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available. Use the Web Component directly or a framework wrapper.
<arc-chip value="react" selected>React</arc-chip>
<arc-chip value="vue">Vue</arc-chip>
<arc-chip value="svelte">Svelte</arc-chip>import { Chip } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>
</>
);
}<script setup>
import { Chip } from '@arclux/arc-ui-vue';
</script>
<template>
<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>
</template><script>
import { Chip } from '@arclux/arc-ui-svelte';
</script>
<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>import { Component } from '@angular/core';
import { Chip } from '@arclux/arc-ui-angular';
@Component({
imports: [Chip],
template: `
<arc-chip value="react" [selected]="true">React</arc-chip>
<arc-chip value="vue">Vue</arc-chip>
<arc-chip value="svelte">Svelte</arc-chip>
`,
})
export class MyComponent {}import { Chip } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>
</>
);
}import { Chip } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>
</>
);
}API
valuestring''- Machine-readable identifier for this chip, included in the
arc-changeevent detail. selectedbooleanfalse- Whether the chip is currently selected. Reflected as an attribute and toggled on click or keypress.
disabledbooleanfalse- Disables interaction, reducing opacity to 40% and blocking pointer events.
Events
arc-changedetail:{ value: string, selected: boolean }- Fired when the chip selected state changes
See Also
- TagCompact pill-shaped label with color variants, custom color support, and an optional remove button, for categorisation, filtering, and selection feedback.
- BadgeCompact pill-shaped label for status indicators, category tags, and notification counts. Seven color variants encode meaning across dashboards, tables, and card layouts.
- Segmented ControlA radio-group-style toggle bar that renders slotted arc-option elements as a row of mutually exclusive buttons with an active highlight.
- Multi SelectMulti-value select with tag chips, inline search filtering, and keyboard navigation.