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产品经理 · 杭州

src/App.vue

<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 } from '@chufix-design/react';

export default function Demo() {
  const [value, setValue] = useState<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: '产品经理 · 杭州' },
  ];
  return (
    <>
      <CfList value={value} onChange={setValue} selectable="single" items={items} />
    </>
  );
}

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

export default function Demo() {
  const [value, setValue] = useState<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: '产品经理 · 杭州' },
  ];
  return (
    <>
      <CfList value={value} onChange={setValue} selectable="single" items={items} />
    </>
  );
}

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

产品

src/App.vue

<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>

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

export default function Demo() {
  const [value, setValue] = useState<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: '产品' },
  ];
  return (
    <>
      <CfList value={value} onChange={setValue} selectable="multiple" items={items} variant="default" />
    </>
  );
}

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

export default function Demo() {
  const [value, setValue] = useState<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: '产品' },
  ];
  return (
    <>
      <CfList value={value} onChange={setValue} selectable="multiple" items={items} variant="default" />
    </>
  );
}

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 · 处理中

src/App.vue

<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>

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

export default function Demo() {
  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 · 处理中' },
  ];
  return (
    <>
      <CfList items={items} variant="card" bordered={false} />
    </>
  );
}

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

export default function Demo() {
  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 · 处理中' },
  ];
  return (
    <>
      <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.