Select

FREE

İkonlu, açıklamalı, gruplu, aramalı ve silinebilir chip'li çoklu seçim destekli seçim listesi.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

Kod

import { Sun, Atom } from "lucide-react";
import { Select } from "@/components/ui/select";

const options = [
  { value: "light", label: "Light", icon: <Sun /> },
  { value: "react", label: "React", icon: <Atom /> },
];

<Select
  searchable
  options={options}
  placeholder="Pick one"
/>

Kurulum

Terminal

npx @bloxa/cli add select
# or: npx shadcn@latest add @bloxa/select

Otomatik kurulan paketler: radix-ui

Örnekler

Temel

İkon ve açıklama

Gruplu ve aramalı

Çoklu seçim

Seçimler silinebilir chip olarak görünür; fazlası +N ile özetlenir.

ReactTailwind CSS

value: ["react","tailwind"]

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

Select

Özellik	Tip	Varsayılan	Açıklama
options	SelectOption[]	—	{ value, label, icon?, description?, group?, disabled? } listesi.
multiple	boolean	false	Çoklu seçim; value string[] olur.
value / defaultValue	string \| string[]	—	Seçili değer(ler).
onValueChange	(value) => void	—	Seçim değişince çağrılır.
searchable	boolean	false	Seçenekleri filtreleyen arama alanı.
clearable	boolean	false	Seçimi temizleme düğmesi.
maxChips	number	3	Çoklu modda +N'den önce gösterilecek chip sayısı.
name	string	—	Form gönderiminde gizli input adı.
size	"sm" \| "md" \| "lg"	"md"	Yükseklik ve yazı boyutu.
labels	{ search?, empty?, clear?, remove? }	—	Arayüz metinleri (çeviri için).