Select

Preview

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>
  );
}

Installation

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

Props

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	-