Chip - React
Chip
import { Chip } from '@idds/react';Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1
Section titled “Contoh 1”Pilih Tema
Default
Single Selection - Outline
Single Selection - Outline
Multiple Selection - Outline
Selected values from Chip are :
-Contoh 2 - Custom Option Enabled
Section titled “Contoh 2 - Custom Option Enabled”Single Selection with Customization
Multiple Selection with Customization
Selected values from Chip are :
-| Name | Type | Default | Required | Description |
|---|---|---|---|---|
options | ChipOption[] | — | Yes | Daftar opsi statis. Setiap opsi memiliki: label (string), value (string), dan opsional disabled (boolean). |
selected | string | string[] | — | Yes | Value yang sedang dipilih. Menjadi array of strings (`string[]`) jika `multiple` bernilai true. |
multiple? | boolean | false | No | Jika true, mengizinkan pemilihan lebih dari satu opsi sekaligus. |
size? | 'small' | 'medium' | 'medium' | No | Ukuran chip. |
variant? | 'filled' | 'outline' | 'outline' | No | Variant chip (filled atau outline). |
onSelect? | (value: string | string[]) => void | — | No | Callback saat user memilih opsi atau menyelesaikan input kustom. |
showCustomization? | boolean | false | No | Jika true, render tombol kustomisasi. |
customizationLabel? | string | 'Kustomisasi' | No | Label tombol kustomisasi. |
customizationComponent? | ReactNode | — | No | Override UI input kustom (default: TextField dengan placeholder). |
className? | string | '' | No | ClassName tambahan pada wrapper. |