Bileşenler

Select

Kısa ve kapalı bir listeden tek seçim; tetikleyiciden açılan bir liste.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Select, seçenekleri items ile alır. Seçim yokken placeholder görünür; tetikleyiciye tıklayınca liste açılır.

Alan etiketi

Yardım metni burada yer alır.

import { Select } from '@bigbang/ui';

const items = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
  { value: 'three', label: 'Üçüncü seçenek', disabled: true },
];

export default function Default() {
  return (
    <div className="max-w-80">
      <Select label="Alan etiketi" items={items} placeholder="Seçin" description="Yardım metni burada yer alır." />
    </div>
  );
}

İkonlu seçenekler

Seçeneklere icon verilince ikon etiketin önünde görünür.

Alan etiketi

import { Select } from '@bigbang/ui';

const items = [
  { value: 'list', label: 'Birinci seçenek', icon: 'list' as const },
  { value: 'grid', label: 'İkinci seçenek', icon: 'layout-grid' as const },
];

export default function WithIcons() {
  return (
    <div className="max-w-80">
      <Select label="Alan etiketi" items={items} defaultValue="list" />
    </div>
  );
}

Kontrollü

value ve onValueChange ile seçili değeri siz tutarsınız. Seçim yokken değer null olur.

Alan etiketi

null

import { Select } from '@bigbang/ui';
import { useState } from 'react';

const items = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
  { value: 'three', label: 'Üçüncü seçenek', disabled: true },
];

export default function Controlled() {
  const [value, setValue] = useState<string | null>(null);
  return (
    <div className="flex max-w-80 flex-col gap-sm">
      <Select label="Alan etiketi" items={items} placeholder="Seçin" value={value} onValueChange={setValue} />
      <code className="type-body-sm text-fg-subtle">{String(value)}</code>
    </div>
  );
}

Durumlar

Zorunlu ve hatalı, salt okunur ve devre dışı alanlar.

Alan etiketi

Bir seçenek seçin.

Alan etiketi

import { Select } from '@bigbang/ui';

const items = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
  { value: 'three', label: 'Üçüncü seçenek', disabled: true },
];

export default function States() {
  return (
    <>
      <div className="flex max-w-80 flex-col gap-lg">
        <Select label="Alan etiketi" items={items} placeholder="Seçin" required error="Bir seçenek seçin." />
        <Select label="Alan etiketi" items={items} defaultValue="one" readOnly />
        <Select label="Alan etiketi" items={items} defaultValue="one" disabled />
      </div>
    </>
  );
}

Çoklu seçim

multiple ile kullanıcı listeden birden fazla seçenek işaretler; liste her seçimden sonra açık kalır ve tetikleyici seçilen etiketleri sırayla yazar. Değeri values ve onValuesChange ile yönetin. Uzun listelerde ya da arama gerekiyorsa çoklu Combobox kullanın.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Tetikleyici input token’larını, liste ortak açılır yüzeyi kullanır: color-surface-raised, color-border-overlay ve shadow-popup.

Alan etiketi

Bir seçenek seçin.

Alan etiketi

Bir seçenek seçin.

Alan etiketi

import { Select } from '@bigbang/ui';

const items = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
  { value: 'three', label: 'Üçüncü seçenek', disabled: true },
];

export default function States() {
  return (
    <>
      <div className="flex max-w-80 flex-col gap-lg">
        <Select label="Alan etiketi" items={items} placeholder="Seçin" required error="Bir seçenek seçin." />
        <Select label="Alan etiketi" items={items} defaultValue="one" readOnly />
        <Select label="Alan etiketi" items={items} defaultValue="one" disabled />
      </div>
    </>
  );
}