🚧 MateChat React document is still under development
MateChat React
  • English

      • List

      List is a flexible option list component with support for grouping, selection state, and keyboard navigation.

      Installation

      pnpm dlx shadcn@latest add https://matechat.noctisynth.org/r/suggestion.json

      Examples

      • Option 1
      • Option 2
      • Option 3
      import { List } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        options={[
          { label: "Option 1", value: "1" },
          { label: "Option 2", value: "2" },
          { label: "Option 3", value: "3" },
        ]}
      />
    </div>
  );
}

      Grouped List

      • Group 1
      • Item 1
      • Item 2
      • Group 2
      • Item 3
      • Item 4
      import { List } from "@matechat/react";

export default function () {
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        optionGroupLabel="label"
        optionGroupChildren="children"
        options={[
          {
            label: "Group 1",
            children: [
              { label: "Item 1", value: "1" },
              { label: "Item 2", value: "2" },
            ],
          },
          {
            label: "Group 2",
            children: [
              { label: "Item 3", value: "3" },
              { label: "Item 4", value: "4" },
            ],
          },
        ]}
      />
    </div>
  );
}

      Selection State

      • Option 1
      • Option 2
      • Option 3
      import { List } from "@matechat/react";
import { useState } from "react";

export default function () {
  const [value, setValue] = useState("option1");
  return (
    <div className="w-full max-w-xs">
      <List
        optionLabel="label"
        value={value}
        onChange={(e) => setValue(e.value as string)}
        options={[
          { label: "Option 1", value: "option1" },
          { label: "Option 2", value: "option2" },
          { label: "Option 3", value: "option3" },
        ]}
      />
    </div>
  );
}

      Properties

      List

      PropertyDescriptionTypeDefault Value