Skip to main content

options

Description​

Optional. Specifies a set of data items that will be used as combo options

Usage​

options?: { id: string | number; label: string }[];

Parameters​

  • id - (required) an id of an option
  • label - (required) the name of an option

Example​

import { useState } from "react";
import { Combo } from "@svar-ui/react-core";

const dataset = [
  { id: 1, label: "First option" },
  { id: 2, label: "Second option" },
  { id: 3, label: "Third option" }
];

export default function Example() {
  const [value, setValue] = useState<number>(1);

  return (
    <Combo
      options={dataset}
      value={value}
      onChange={(v) => setValue(v)}
    />
  );
}

Details​

It is also possible to put data in a separate file and specify the name of the data set as a value of the options property of Combo:

userlist.js
export const users = [
  { id: 1, label: "name1" },
  { id: 2, label: "name2" }
];
App.tsx
import { useState } from "react";
import { Combo } from "@svar-ui/react-core";
import { users } from "../your_data/userlist";

export default function App() {
  const [value, setValue] = useState<number>(1);

  return (
    <Combo
      options={users}
      value={value}
      onChange={(v) => setValue(v)}
    />
  );
}

Related article: Loading options

Related sample: Combo