Pilih

Penggunaan

import {
  Select,
  SelectGroup,
  SelectGroupTitle,
  SelectValue,
  SelectTrigger,
  SelectLabel,
  SelectContent,
  SelectHeader,
  SelectFooter,
  SelectItem,
  SelectSeparator,
} from "@govtechmy/myds-react/select";

export default () => (
  <Select>
    <SelectTrigger>
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectHeader />
      <SelectGroup>
        <SelectGroupTitle />
        <SelectItem />
      </SelectGroup>
      <SelectSeparator />
      <SelectFooter />
    </SelectContent>
  </Select>
);

Contoh

Saiz

Gunakan prop size untuk menukar saiz pilihan! Saiz yang tersedia adalah small, medium, dan large. Secara lalai, saiz adalah small.

Varian

Gunakan prop variant untuk menukar varian pilihan! Varian yang tersedia adalah outline dan ghost. Secara lalai, varian adalah outline.

Dinonaktifkan

Terdapat banyak cara untuk berinteraksi dengan keadaan disabled Pilih. Select boleh dinonaktifkan sepenuhnya dengan menetapkan prop disabled kepada true.

Untuk kawalan yang lebih halus pada pilihan mana yang hendak dinonaktifkan, anda boleh menetapkan disabled pada SelectItem individu!

Pilihan Berkumpulan

Pilihan berkumpulan boleh dibuat dengan menggunakan komponen SelectGroup dan SelectGroupTitle. Ia membolehkan anda mengumpulkan pilihan yang berkaitan bersama-sama, mewujudkan pilihan yang lebih teratur dan berstruktur.

Dengan Header

Anda boleh menambah header pada pilihan dengan menggunakan komponen SelectHeader. Ia membolehkan anda menambah header pada pilihan, memberikan konteks tambahan, fungsi atau maklumat kepada pengguna.

Dengan Footer

Anda boleh menambah footer pada pilihan dengan menggunakan komponen SelectFooter. Ia membolehkan anda menambah footer pada pilihan, memberikan konteks tambahan, fungsi atau maklumat kepada pengguna.

Pelbagai

Pilih juga menyokong pemilihan berbilang. Untuk membolehkan pemilihan berbilang, tetapkan prop multiple kepada true pada Select.

Paparan Nilai Tersuai

Anda boleh menyesuaikan paparan nilai dengan menggunakan komponen SelectValue. Ia membolehkan anda menyesuaikan paparan nilai pilihan.

Props

Pilih

SelectValue

SelectItem