Select

Usage

Installation

npx the-dig@latest add Select,Menu,CircularProgress,Chip

Props

Select supports controlled and uncontrolled values, single or multiple selection, and local disabled options. The imperative ref exposes getValue, setValue, clearValue, focus, blur, openMenu, and closeMenu. renderOption receives (option, isSelected).

Select

Prop	Type	Default
options *	Array	-
defaultValue	object | Array<object>	-
value	object | Array<object>	-
name	string	-
onChange	function	-
idField	string	id
labelField	string	label
hasError	boolean	false
readOnly	boolean	false
disabled	boolean	false
placeholder	string	انتخاب کنید
size	"xs" | "sm" | "md" | "lg"| "xl"	md
width	string	100%
variant	"primary" | "secondary" |	primary
maxDropdownHeight	number	200
renderOption	ReactNode	-
id	string	-
className	string	-
chipColor	"brand" | "info" | "success" | "warning" | "danger" | "gray"	"brand"
truncateChips	boolean	true
maxChipLength	number	20

StartAdornment

import { BadgeCheck } from "lucide-react";
import { useState } from "react";
export default function Page() {
  const options = [
    { id: "1", label: "تهران" },
    { id: "2", label: "اصفهان" },
    { id: "3", label: "شیراز" },
    { id: "5", label: "مشهد" },
    { id: "6", label: "اهواز" },
    { id: "7", label: "خراسان رضوی" },
    { id: "8", label: "تبریز" },
    { id: "9", label: "خراسان شمالی" },
    { id: "10", label: "سمنان" },
    { id: "11", label: "زنجان" },
    { id: "12", label: "کرمان" }
    ];
    const [singleValue, setSingleValue] = useState<any | null>("9");
    return (
      <Select
        options={options}
        onChange={(val) => {setSingleValue(val)}}
        startAdornment={<BadgeCheck size={18} />}
        />	
    );
}

Single Select

import { useRef, useState } from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const [selectedValue, setSelectedValue] = useState();
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
           options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
           onChange={(val) => setSelectedValue(val)}
        />
    </div>
  );
}

Mulitple Select

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const [selectedValue, setSelectedValue] = useState();
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
          options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
          onChange={(val) => setSelectedValue(val)}
          multiple={true}
        />
    </div>
  );
}

Size

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const [selectedValue, setSelectedValue] = useState();
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
        options={[
          { id: "1", label: "تهران" },
          { id: "2", label: "اصفهان" },
          { id: "3", label: "شیراز" },
          { id: "5", label: "مشهد" },
          { id: "6", label: "اهواز" },
          { id: "7", label: "خراسان رضوی" },
          { id: "8", label: "تبریز" },
          { id: "9", label: "خراسان شمالی" },
          { id: "10", label: "سمنان" },
          { id: "11", label: "زنجان" },
          { id: "12", label: "کرمان" }
        ]}
        onChange={(val) => setSelectedValue(val)}
        size="xs"
      />
    </div>
  );
}

Has Error

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const [selectedValue, setSelectedValue] = useState();
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
          options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
          onChange={(val) => setSelectedValue(val)}
          hasError={true}
        />
    </div>
  );
}

Default value

import { useRef, useState } from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const options = [
    { id: "1", label: "تهران" },
    { id: "2", label: "اصفهان" },
    { id: "3", label: "شیراز" },
    { id: "5", label: "مشهد" },
    { id: "6", label: "اهواز" },
    { id: "7", label: "خراسان رضوی" },
    { id: "8", label: "تبریز" },
    { id: "9", label: "خراسان شمالی" },
    { id: "10", label: "سمنان" },
    { id: "11", label: "زنجان" },
    { id: "12", label: "کرمان" }
    ];
    const [singleValue, setSingleValue] = useState<any | null>("5"); // { id: 5, label: "مشهد" }
    const [multiValue, setMultiValue] = useState<any[]>([{ id: 3, label: "شیراز" },{ id: 5, label: "مشهد" }]); // ["3" , "5"]
    return (
      <>
        <SelectList
          options={options}
          defaultValue={singleValue}
          onChange={(val) => {setSingleValue(val)}}
        />
        <SelectList
          options={options}
          multiple={true}
          defaultValue={multiValue}
          onChange={(val) => setMultiValue(Array.isArray(val) ? val : [])}
        />
      </>
    );
  }

ReadOnly

import { useRef, useState } from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
          options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
          idField="code"
          labelField="name"
          readOnly={true}
          onChange={(e) => {}}
        />
    </div>
  );
}

Disabled

import { useRef, useState } from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
          options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
          idField="code"
          labelField="name"
          onChange={(e) => {}}
        />
    </div>
  );
}

Variant

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

export default function Page() {
  const [selectedValue, setSelectedValue] = useState();
  return (
    <div className="min-h-screen flex items-center justify-center bg-gray-50">
       <Select
          options={[
            { id: "1", label: "تهران" },
            { id: "2", label: "اصفهان" },
            { id: "3", label: "شیراز" },
            { id: "5", label: "مشهد" },
            { id: "6", label: "اهواز" },
            { id: "7", label: "خراسان رضوی" },
            { id: "8", label: "تبریز" },
            { id: "9", label: "خراسان شمالی" },
            { id: "10", label: "سمنان" },
            { id: "11", label: "زنجان" },
            { id: "12", label: "کرمان" }
          ]}
          onChange={(val) => setSelectedValue(val)}
          variant="secondary"
      />
    </div>
  );
}

RenderOption

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

export default function UserSelectExample() {
  const users: User[] = [
    { id: 1, name: "کاربر شماره 1", email: "test1@example.com", role: "مدیر"},
    { id: 2, name: "کاربر شماره 2", email: "test2@example.com", role: "کاربر" },
    { id: 3, name: "کاربر شماره 3", email: "test3@example.com", role: "نویسنده" },
    { id: 4, name: "کاربر شماره 4", email: "test4@example.com", role: "مشتری" },
  ];

  const renderUserOption = (user: User, isSelected: boolean) => (
    <div className="flex items-center justify-between w-full">
      <div className="flex items-center gap-3">
        <div className="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center text-white text-sm">
          {user.name.charAt(0)}
        </div>
        <div>
          <div className="font-medium">{user.name}</div>
          <div className="text-sm text-gray-500">{user.email}</div>
        </div>
        {isSelected && (
        <div className="text-green-500 text-lg">✓</div>
      )}
      </div>
      
      <div className={`px-2 py-1 rounded text-xs ${
        user.role === "مدیر" ? "bg-red-100 text-red-800" :
        user.role === "نویسنده" ? "bg-blue-100 text-blue-800" :
        "bg-gray-100 text-gray-800"
      }`}>
        {user.role}
      </div>
      
    </div>
  );

  return (
    <div className="w-full">
      <SelectList
        options={users}
        renderOption={renderUserOption}
        placeholder="کاربر را انتخاب کنید..."
        labelField="name"
      />
    </div>
  );
}

Ref

import {(useRef, useState)} from "react";
import Select from "@repo/ui/Select";

interface User {
  id: number;
  name: string;
  email: string;
  role: string;
}

function RefControlExample() {
  const userSelectRef = useRef<SelectListRef<User>>(null);
  const [selectedUserInfo, setSelectedUserInfo] = useState<string>("");

  const users: User[] = [
    { id: 1, name: "علی محمدی", email: "ali@example.com", role: "مدیر" },
    { id: 2, name: "رضا احمدی", email: "reza@example.com", role: "کاربر" },
    { id: 3, name: "سارا کریمی", email: "sara@example.com", role: "نویسنده" },
    { id: 4, name: "مریم حسینی", email: "maryam@example.com", role: "مشتری" },
    { id: 5, name: "امیر جعفری", email: "amir@example.com", role: "مشتری" },
  ];

  // فوکوس روی SelectList
  const handleFocus = () => {
    userSelectRef.current?.focus();
  };

  // حذف انتخاب‌ها
  const handleClearSelection = () => {
    if (userSelectRef.current) {
      const currentValue = userSelectRef.current.getValue();

      if (currentValue && (Array.isArray(currentValue) ? currentValue.length > 0 : true)) {
        userSelectRef.current.clearValue();
        setSelectedUserInfo("");
      } else {
      }
    }
  };

  const showSelectedValues = () => {
    const values = userSelectRef.current?.getValue();
    console.log("Selected tags:", values);
    alert(`تگ‌های انتخاب شده: ${JSON.stringify(values, null, 2)}`);
  };

  return (
    <div className="w-full">
      <SelectList
        ref={userSelectRef}
        options={users}
        placeholder="یک کاربر انتخاب کنید..."
        labelField="name"
        onChange={(value) => {}}
        multiple
      />

      <div className="flex gap-2 flex-wrap mr-4">
        <Button variant="contained" color="brand" onClick={handleFocus}>
          فوکوس
        </Button>

        <Button variant="contained" color="brand" onClick={handleClearSelection}>
          حذف
        </Button>
        <Button variant="contained" color="brand" onClick={showSelectedValues}>
          نمایش مقادیر
        </Button>
      </div>
    </div>
  );
}