Chips

Chip sets group related chips into one input, filter, or selection list.

Usage

Chips renders a labelled collection from an items model. Each item can be selected, removed, disabled, linked, or given an icon. Use stable item id values when the collection can be reordered.

React:

tsx

import { Chips } from '@udixio/ui-react';

Angular:

import { Chips } from '@udixio/ui-angular';

Svelte:

svelte

import { Chips } from '@udixio/ui-svelte';

Controlled collection

All adapters expose the collection as controlled state. React uses items/onItemsChange, Angular uses [items]/(itemsChange), and Svelte uses bind:items or items with onItemsChange.

import { useState } from 'react';
import { Chips, type ChipItem } from '@udixio/ui-react';

export default function ChipsListReact() {
  const [items, setItems] = useState<ChipItem[]>([{ id: 'photos', label: 'Photos', selected: true }, { id: 'videos', label: 'Videos', removable: true }]);
  return <Chips label="Media filters" items={items} onItemsChange={setItems} />;
}

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { Chips } from '@udixio/ui-angular';

@Component({ selector: 'docs-chips-list-angular', standalone: true, imports: [Chips], changeDetection: ChangeDetectionStrategy.OnPush, template: `<udx-chips label="Media filters" [items]="items()" (itemsChange)="items.set($event)" />` })
export class ChipsListAngular { protected readonly items = signal([{ id: 'photos', label: 'Photos', selected: true }, { id: 'videos', label: 'Videos', removable: true }]); }

<script lang="ts">
  import { Chips } from '@udixio/ui-svelte';

  let items = $state([
    { id: 'photos', label: 'Photos', selected: true },
    { id: 'videos', label: 'Videos', removable: true },
  ]);
</script>

<Chips label="Media filters" bind:items />

Input variant

Use variant="input" for editable tags. The component handles inline editing and removal, while the application remains the source of truth for items. Svelte projects update that model with a bindable items prop.

scrollable prefers horizontal overflow to wrapping, and draggable enables native dragging for each chip. The individual Chip contract describes editing shortcuts and selection semantics.