Komponen / Form & input

MultiSelect

Memilih beberapa nilai dari daftar dengan pencarian — penanggung jawab tugas, tim proyek, reviewer BAST, tag. Nilai terpilih tampil sebagai Token di dalam field.

React · BetaFigma · siapFigma Sumber

Penanggung jawab

Opsi berisi checkbox, avatar, dan jabatan. Token Small berbaris dan membungkus ke baris baru bila penuh.

Penanggung jawab

Anisa NugrahaDimas Prasetyo

Semua penanggung jawab menerima notifikasi tugas.

import { useState } from 'react';
import { FormField, MultiSelect, type MultiSelectOption } from '@divistant/circca-react';

const TIM: MultiSelectOption[] = [
  { value: 'anisa', label: 'Anisa Nugraha', description: 'Project Manager', avatar: true },
  { value: 'dimas', label: 'Dimas Prasetyo', description: 'Konsultan implementasi', avatar: true },
  { value: 'rina', label: 'Rina Kartika', description: 'Finance', avatar: true },
  { value: 'yoga', label: 'Yoga Saputra', description: 'Engineer jaringan', avatar: true },
  { value: 'sari', label: 'Sari Wulandari', description: 'Admin penjualan', avatar: true },
];

export default function Example() {
  const [assignee, setAssignee] = useState<string[]>(['anisa', 'dimas']);
  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="Penanggung jawab" helperText="Semua penanggung jawab menerima notifikasi tugas.">
        <MultiSelect
          options={TIM}
          value={assignee}
          onValueChange={setAssignee}
          placeholder="Pilih penanggung jawab"
          resultLabel="orang"
        />
      </FormField>
    </div>
  );
}

Tag dengan Buat baru

onCreate menambah tag baru dari teks yang diketik; Backspace di input kosong menghapus tag terakhir.

Tag(opsional)

LisensiMicrosoft 365

Ketik untuk mencari; tekan Enter pada “Buat tag” untuk tag baru.

import { useState } from 'react';
import { FormField, MultiSelect } from '@divistant/circca-react';

export default function Example() {
  const [tags, setTags] = useState([
    { value: 'lisensi', label: 'Lisensi' },
    { value: 'perpanjangan', label: 'Perpanjangan' },
    { value: 'microsoft-365', label: 'Microsoft 365' },
    { value: 'fortinet', label: 'Fortinet' },
    { value: 'prioritas', label: 'Prioritas' },
  ]);
  const [value, setValue] = useState<string[]>(['lisensi', 'microsoft-365']);

  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="Tag" optional helperText="Ketik untuk mencari; tekan Enter pada “Buat tag” untuk tag baru.">
        <MultiSelect
          options={tags}
          value={value}
          onValueChange={setValue}
          placeholder="Tambah tag"
          createLabel={teks => `Buat tag "${teks}"`}
          onCreate={teks => {
            const slug = teks.toLowerCase().replace(/\s+/g, '-');
            setTags(t => [...t, { value: slug, label: teks }]);
            setValue(v => [...v, slug]);
          }}
        />
      </FormField>
    </div>
  );
}

Di dalam FormField

Error, hanya-baca (Token tanpa tombol hapus), dan nonaktif mengikuti FormField.

Reviewer BAST

Pilih minimal satu reviewer agar BAST bisa diajukan ke customer.

Tim proyek

Anisa NugrahaRina Kartika

Proyek sudah ditutup.

Pengamat

Dimas Prasetyo

import { useState } from 'react';
import { FormField, MultiSelect } from '@divistant/circca-react';

const TIM = [
  { value: 'anisa', label: 'Anisa Nugraha', description: 'Project Manager', avatar: true },
  { value: 'dimas', label: 'Dimas Prasetyo', description: 'Konsultan implementasi', avatar: true },
  { value: 'rina', label: 'Rina Kartika', description: 'Finance', avatar: true },
];

export default function Example() {
  const [reviewer, setReviewer] = useState<string[]>([]);
  return (
    <div className="grid max-w-sm gap-4">
      <FormField
        label="Reviewer BAST"
        required
        error={reviewer.length ? undefined : 'Pilih minimal satu reviewer agar BAST bisa diajukan ke customer.'}
      >
        <MultiSelect options={TIM} value={reviewer} onValueChange={setReviewer} placeholder="Pilih reviewer" />
      </FormField>
      <FormField label="Tim proyek" readOnly helperText="Proyek sudah ditutup.">
        <MultiSelect options={TIM} defaultValue={['anisa', 'rina']} />
      </FormField>
      <FormField label="Pengamat" disabled>
        <MultiSelect options={TIM} defaultValue={['dimas']} />
      </FormField>
    </div>
  );
}