Preview Updated 2026-05-10

List

General-purpose list with single / multi selection, grouping, card style, and custom render.

Single select

selectable="single" turns the list into a single-select control; v-model binds a string.

背景

Alice Chen前端工程师 · 上海
Bob Wang后端工程师 · 北京
Carol Liu设计师 · 深圳
Dave Zhang产品经理 · 杭州

<script setup lang="ts">
import { ref } from 'vue';
import { CfList, type ListItem } from '@chufix-design/vue';

const value = ref<string | string[] | null>('alice');
const items: ListItem[] = [
  { key: 'alice', label: 'Alice Chen', description: '前端工程师 · 上海' },
  { key: 'bob', label: 'Bob Wang', description: '后端工程师 · 北京' },
  { key: 'carol', label: 'Carol Liu', description: '设计师 · 深圳', disabled: true },
  { key: 'dave', label: 'Dave Zhang', description: '产品经理 · 杭州' },
];
</script>

<template>
  <CfList
    v-model="value"
    selectable="single"
    :items="items"
  />
</template>

<script setup>
import { ref } from 'vue';
import { CfList } from '@chufix-design/vue';

const value = ref<string | string[] | null>('alice');
const items= [
  { key: 'alice', label: 'Alice Chen', description: '前端工程师 · 上海' },
  { key: 'bob', label: 'Bob Wang', description: '后端工程师 · 北京' },
  { key: 'carol', label: 'Carol Liu', description: '设计师 · 深圳', disabled: true },
  { key: 'dave', label: 'Dave Zhang', description: '产品经理 · 杭州' },
];
</script>

<template>
  <CfList
    v-model="value"
    selectable="single"
    :items="items"
  />
</template>

import { useState } from 'react';
import { CfList, type ListItem } from '@chufix-design/react';

const items: ListItem[] = [/* ... */];

export default function Demo() {
const [value, setValue] = useState<string>('alice');
return (
  <CfList
    value={value}
    selectable="single"
    items={items}
    onChange={(v) => setValue(v as string)}
  />
);
}

import { useState } from 'react';
import { CfList } from '@chufix-design/react';

const items= [/* ... */];

export default function Demo() {
const [value, setValue] = useState<string>('alice');
return (
  <CfList
    value={value}
    selectable="single"
    items={items}
    onChange={(v) => setValue(v)}
  />
);
}

Multi select with grouping

Each ListItem can declare a group; items sharing a group are clustered together with a group title. With selectable="multiple", v-model binds string[].

背景

工程

Alice
Bob

设计

Carol
Dave

产品

<script setup lang="ts">
import { ref } from 'vue';
import { CfList, type ListItem } from '@chufix-design/vue';

const value = ref<string[]>(['alice', 'eve']);
const items: ListItem[] = [
  { key: 'alice', label: 'Alice', group: '工程' },
  { key: 'bob', label: 'Bob', group: '工程' },
  { key: 'carol', label: 'Carol', group: '设计' },
  { key: 'dave', label: 'Dave', group: '设计' },
  { key: 'eve', label: 'Eve', group: '产品' },
];
</script>

<template>
  <CfList
    v-model="value"
    selectable="multiple"
    :items="items"
    variant="default"
  />
</template>

<script setup>
import { ref } from 'vue';
import { CfList } from '@chufix-design/vue';

const value = ref<string[]>(['alice', 'eve']);
const items= [
  { key: 'alice', label: 'Alice', group: '工程' },
  { key: 'bob', label: 'Bob', group: '工程' },
  { key: 'carol', label: 'Carol', group: '设计' },
  { key: 'dave', label: 'Dave', group: '设计' },
  { key: 'eve', label: 'Eve', group: '产品' },
];
</script>

<template>
  <CfList
    v-model="value"
    selectable="multiple"
    :items="items"
    variant="default"
  />
</template>

<CfList value={value} selectable="multiple" items={items} onChange={setValue as any} />

<CfList value={value} selectable="multiple" items={items} onChange={setValue} />

Card style

variant="card" renders each item as its own card with built-in spacing and corners — ideal for individual entries like orders or notifications.

背景

订单 #2026-001总额 ¥1,280 · 已支付
订单 #2026-002总额 ¥698 · 已发货
订单 #2026-003总额 ¥3,450 · 处理中

<script setup lang="ts">
import { CfList, type ListItem } from '@chufix-design/vue';

const items: ListItem[] = [
  { key: '1', label: '订单 #2026-001', description: '总额 ¥1,280 · 已支付' },
  { key: '2', label: '订单 #2026-002', description: '总额 ¥698 · 已发货' },
  { key: '3', label: '订单 #2026-003', description: '总额 ¥3,450 · 处理中' },
];
</script>

<template>
  <CfList :items="items" variant="card" :bordered="false" />
</template>

<script setup>
import { CfList } from '@chufix-design/vue';

const items= [
  { key: '1', label: '订单 #2026-001', description: '总额 ¥1,280 · 已支付' },
  { key: '2', label: '订单 #2026-002', description: '总额 ¥698 · 已发货' },
  { key: '3', label: '订单 #2026-003', description: '总额 ¥3,450 · 处理中' },
];
</script>

<template>
  <CfList :items="items" variant="card" :bordered="false" />
</template>

<CfList items={items} variant="card" bordered={false} />

<CfList items={items} variant="card" bordered={false} />

API

Prop	Type	Default	Description
`items`	`ListItem[]`	`[]`	Data array
`modelValue` (Vue) / `value` (React)	`string \| string[] \| null`	`null`	Selected item(s); type depends on `selectable`
`selectable`	`'single' \| 'multiple' \| undefined`	`—`	Selection mode; omit for no selection
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size
`variant`	`'default' \| 'divided' \| 'card'`	`'default'`	Visual mode
`bordered`	`boolean`	`true`	Outer border
`hoverable`	`boolean`	`true`	Highlight on hover
`emptyText`	`string \| ReactNode`	`'No data'`	Empty state text

ListItem: { key, label?, description?, leading?, trailing?, disabled?, group?, ...extra }. Events: update:modelValue / select (React: onChange / onSelect). Slots: default slot (Vue) or renderItem (React) can fully override row rendering.