Select Field

Components

Select Field

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

Usage

'use client';
 
import * as React from 'react';
 
import { SelectField } from '@/components/ui/formfield';
 
export function SelectFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <SelectField
        name="status"
        label="Status"
        placeholder="Select Status"
        items={[
          { value: 'pending', label: 'Pending' },
          { value: 'approved', label: 'Approved' },
          { value: 'rejected', label: 'Rejected' },
        ]}
        // defaultValue="pending"
      />
    </form>
  );
}

'use client';
 
import * as React from 'react';
 
import { SelectField } from '@/components/ui/formfield';
 
export function SelectFieldDemo() {
  return (
    <form className="flex flex-col gap-4 p-4">
      <SelectField
        name="status"
        label="Status"
        placeholder="Select Status"
        items={[
          { value: 'pending', label: 'Pending' },
          { value: 'approved', label: 'Approved' },
          { value: 'rejected', label: 'Rejected' },
        ]}
        // defaultValue="pending"
      />
    </form>
  );
}

API Reference

Prop	Type	Default
name*	string
id	string
label	string
placeholder	string
required	boolean
readOnly	boolean
error	string
items	[{label: string, value: string \| number}]
value	any
defaultValue	any
onChange	event
className	string