---
title: "Chip コンポーネント — zenit Zig UI"
description: "コンパクトな選択肢、フィルター条件、アイコン付き token。active、outline、disabled、closable とアイコンの組み合わせは control sh…"
url: https://zenit.z.express/ja/components/chip
language: ja
alternate_en: https://zenit.z.express/components/chip.md
alternate_zh: https://zenit.z.express/zh/components/chip.md
alternate_es: https://zenit.z.express/es/components/chip.md
alternate_ko: https://zenit.z.express/ko/components/chip.md
alternate_fr: https://zenit.z.express/fr/components/chip.md
alternate_de: https://zenit.z.express/de/components/chip.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# Chip

`ui.widgets.Chip`

コンパクトな選択肢、フィルター条件、アイコン付き token。

[Video](https://zenit.z.express/media/stories/chip.mp4?v=68187de95d)

**BEHAVIOR CONTRACT**

active、outline、disabled、closable とアイコンの組み合わせは control shell を再利用します。

**RECORDED INTERACTION**

状態、サイズ、アイコンの組み合わせを一巡します。

`examples/storybook/stories.zig:584`

```zig
// ── Chip ──
pub fn buildChip(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    const a = cx.allocator;
    const icons = ui.assets.common;
    const c = try col(cx, 12);

    // ── 变体（含 disabled）──
    try c.appendChild(a, try label(cx, "Variants"));
    const r = try row(cx, 8);
    try r.appendChild(a, try W.Chip(.{ .label = "Default" }).mount(scope, cx));
    try r.appendChild(a, try W.Chip(.{ .label = "Active", .variant = .active }).mount(scope, cx));
    try r.appendChild(a, try W.Chip(.{ .label = "Outline", .variant = .outline }).mount(scope, cx));
    try r.appendChild(a, try W.Chip(.{ .label = "Disabled", .variant = .disabled }).mount(scope, cx));
    try r.appendChild(a, try W.Chip(.{ .label = "Closable", .closable = true }).mount(scope, cx));
    try c.appendChild(a, r);

    // ── 尺寸 ──
    try c.appendChild(a, try label(cx, "Sizes (xs / sm / md)"));
    const r_sz = try row(cx, 8);
    inline for (.{ W.ChipSize.xs, .sm, .md }, .{ "XS", "SM", "MD" }) |sz, t| {
        try r_sz.appendChild(a, try W.Chip(.{ .label = t, .size = sz, .variant = .active }).mount(scope, cx));
    }
    try c.appendChild(a, r_sz);

    // ── 带图标 ──
    try c.appendChild(a, try label(cx, "With icon"));
    const r_ic = try row(cx, 8);
    try r_ic.appendChild(a, try W.Chip(.{ .label = "Starred", .icon_asset = icons.star }).mount(scope, cx));
    try r_ic.appendChild(a, try W.Chip(.{ .label = "Folder", .icon_asset = icons.folder, .closable = true }).mount(scope, cx));
    try c.appendChild(a, r_ic);
    return c;
}
```

[GitHub でソースを見るexamples/storybook/stories.zig:584](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L584)

Storybook にあるこの story のコードそのままです（zenit 5f9add5+wip 2026-09-30）。`W` は `ui.widgets` のことで、`col` / `row` / `label` は Storybook 内の小さなレイアウトヘルパーです。

### ChipProps

`ui.widgets.Chip`

[src/ui/components/chip/mod.zig:59](https://github.com/version-next/zenit/blob/HEAD/src/ui/components/chip/mod.zig#L59)

```zig
fn Chip(props: ChipProps) ChipBuilder
```

| フィールド | 型 | デフォルト値 | 説明 |
| --- | --- | --- | --- |
| `label` | `[]const u8` | — | — |
| `size` | `ChipSize` `.xs` `.sm` `.md` | `.sm` | — |
| `variant` | `ChipVariant` `.default` `.active` `.outline` `.disabled` | `.default` | — |
| `icon_asset` | `?svg_assets.Asset` | `null` | — |
| `closable` | `bool` | `false` | — |
| `readonly` | `bool` | `true` | — |
| `on_click` | `?core.HandlerRef` | `null` | — |
| `on_close` | `?core.HandlerRef` | `null` | — |

### \*Node

`ui.widgets.Chip`

mount は `*Node` を直接返します。親ノードに append してください。