Field

A form field wrapper that provides labeling, description, and validation messaging for any input control. Supports required fields, disabled states, error messages, and real-time validity tracking via Base UI primitives.

Cby coss

Install

npx shadcn@latest add https://21st.dev/r/coss.com/field

Loading preview...

"use client";
import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxEmpty, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxValue } from "@/components/ui/combobox";
import { Field, FieldDescription, FieldLabel } from "@/components/ui/component";
const items = [
  { label: "Apple", value: "apple" }, { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" }, { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" }, { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" }, { label: "Kiwi", value: "kiwi" },
];
export default function FieldComboboxMultipleDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <div className="w-full max-w-sm">
        <Field>
          <FieldLabel>Fruits</FieldLabel>
          <Combobox defaultValue={[items[0], items[4]]} items={items} multiple>
            <ComboboxChips>
              <ComboboxValue>
                {(value: { value: string; label: string }[]) => (
                  <>
                    {value?.map((item) => (
                      <ComboboxChip aria-label={item.label} key={item.value}>{item.label}</ComboboxChip>
                    ))}
                    <ComboboxChipsInput aria-label="Select items" placeholder={value.length > 0 ? undefined : "Select items…"} />
                  </>
                )}
              </ComboboxValue>
            </ComboboxChips>
            <ComboboxPopup>
              <ComboboxEmpty>No items found.</ComboboxEmpty>
              <ComboboxList>
                {(item: { label: string; value: string }) => (
                  <ComboboxItem key={item.value} value={item}>{item.label}</ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxPopup>
          </Combobox>
          <FieldDescription>Select multiple fruits.</FieldDescription>
        </Field>
      </div>
    </div>
  );
}