Picker Field

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

Prop	Type	Notes
name*	string
id	string
label	string
placeholder	string
required	boolean
readOnly	boolean
error	string
canClear	boolean
selectedItem	any
onItemSelected	event
onChange	event
className	string
keyFieldName	string	value to store
labelFieldName	string	label to display to user

PickerField Render Props

Prop	Type	Notes
position	{ right: number; left: number; top: number; bottom: number };
onCancel*	() => void;
onSelectItem	(item: M) => void;
selectedItem	M