Select

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

const TERMIN = [
  { value: 'cod', label: 'Tunai saat serah terima' },
  { value: 'net14', label: 'Net 14 hari' },
  { value: 'net30', label: 'Net 30 hari' },
  { value: 'net60', label: 'Net 60 hari', disabled: true },
];

export default function Example() {
  const [termin, setTermin] = useState<string>();
  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="Termin pembayaran" required helperText="Net 60 perlu persetujuan Direksi.">
        <Select options={TERMIN} value={termin} onValueChange={setTermin} placeholder="Pilih termin…" />
      </FormField>
    </div>
  );
}

import { FormField, Select } from '@divistant/circca-react';
import { Buildings, Storefront } from '@phosphor-icons/react';

export default function Example() {
  return (
    <div className="grid max-w-sm gap-4">
      <FormField label="Perusahaan">
        <Select defaultValue="dikstra" leadingVisual={Buildings}>
          <Select.Option value="divistant" leadingVisual={Buildings}>PT Divistant</Select.Option>
          <Select.Option value="dikstra" leadingVisual={Storefront}>PT Dikstra Solusi</Select.Option>
        </Select>
      </FormField>
      <FormField label="Status" error="Pilih status sebelum menyimpan.">
        <Select size="sm" options={[{ value: 'aktif', label: 'Aktif' }, { value: 'nonaktif', label: 'Nonaktif' }]} />
      </FormField>
    </div>
  );
}