Chip — ARC UI

Components

Chip

input

interactive

<arc-chip>

Overview

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 Segmented Control or Radio Group 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 colour, 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 `option` role with `aria-selected` and `aria-disabled` for accessible group patterns
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';

<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: `
    <Chip value="react" [selected]="true">React</Chip>
    <Chip value="vue">Vue</Chip>
    <Chip value="svelte">Svelte</Chip>
  `,
})
export class MyComponent {}

import { Chip } from '@arclux/arc-ui-solid';

<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>

import { Chip } from '@arclux/arc-ui-preact';

<Chip value="react" selected>React</Chip>
<Chip value="vue">Vue</Chip>
<Chip value="svelte">Svelte</Chip>

API

Prop	Type	Default	Description
`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

Event	Description
`arc-change`	Fired when the chip selected state changes

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

ARC UI

Arclight