Chip

A toggleable pill-shaped element for filters, tags, or multi-select options, with a selected state highlighted in accent-primary.

Components

Chip

input

interactive

<arc-chip>

Overview

Chip is a compact, pill-shaped interactive element that can be toggled between selected and unselected states. It is designed for scenarios where users need to pick 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`, making them compatible with 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 work best for the uppercase styling. Chip fires an `arc-change` event on every toggle, including both the `value` and `selected` state in the event detail. This makes it straightforward to manage chip groups — simply listen to `arc-change` on each chip and maintain a set of selected values in your application state. The `value` prop acts as a machine-readable identifier that is 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 short — 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
Combined focus-visible glow with selection glow for clear keyboard focus indication
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

React

Vue

Svelte

Angular

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

selected boolean =false: Whether the chip is currently selected. Reflected as an attribute and toggled on click or keypress.
disabled boolean =false: Disables interaction, reducing opacity to 40% and blocking pointer events.
value string ='': Machine-readable identifier for this chip, included in the `arc-change` event detail.

Events

arc-change detail: { value: string, selected: boolean }: Fired when the chip selected state changes

Chip

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight