Components
Picker Field

Picker Field

A picker field component for use inside a form, used for boolean input

About

<PickerField \> is primarily used to show List of items from database. Normally combined with a ListPicker, but can be used to show Dialog, Picker or any other component that adheres to context interface

Usage

'use client';
 
import * as React from 'react';
 
import { PickerField } from '@/components/ui/formfield';
import { Picker } from '@/components/ui/picker';
 
export function PickerFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <PickerField name="status" label="Status" placeholder="Select a status">
        <Picker>
          <div>Picker</div>
        </Picker>
      </PickerField>
    </form>
  );
}
'use client';
 
import * as React from 'react';
 
import { PickerField } from '@/components/ui/formfield';
import { Picker } from '@/components/ui/picker';
 
export function PickerFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <PickerField name="status" label="Status" placeholder="Select a status">
        <Picker>
          <div>Picker</div>
        </Picker>
      </PickerField>
    </form>
  );
}

API Reference

PropTypeNotes
name*string
idstring
labelstring
placeholderstring
requiredboolean
readOnlyboolean
errorstring
canClearboolean
selectedItemany
onItemSelectedevent
onChangeevent
classNamestring
keyFieldNamestringvalue to store
labelFieldNamestringlabel to display to user

PickerField Render Props

PropTypeNotes
position{ right: number; left: number; top: number; bottom: number };
onCancel*() => void;
onSelectItem(item: M) => void;
selectedItemM