Skip to main content

textOptions

Description​

Optional. Specifies a set of data items that will be used in the input and hidden from dropdown

Usage​

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

Parameters​

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

Usage​

array

Example​

Note if you want to display options in the dropdown, you need to define the options array.

// ExampleComponent.tsx
import { useState } from "react";
import { RichSelect } from "./RichSelect.jsx"; // adjust import path as needed

const users = [
  { id: 1, label: "Berni Mayou" },
  { id: 2, label: "August Dvorak" },
  { id: 3, label: "Elly Soyer" },
];

const renderedUsers = [
  { id: 103, label: "Ned Stark" },
  { id: 104, label: "Lord Varys" },
];

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

  return (
    <RichSelect
      textOptions={users}
      options={renderedUsers}
      value={value}
      onChange={(v) => setValue(v)} // adjust according to RichSelect's onChange payload if needed
    />
  );
}

Related article: Hiding options from dropdown

Related sample: RichSelect