Components
Loading preview...
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.
npx shadcn@latest add https://21st.dev/r/coss.com/field"use client";
import { Autocomplete, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup } from "@/components/ui/autocomplete";
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 FieldAutocompleteDemo() {
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>
<Autocomplete items={items}>
<AutocompleteInput aria-label="Search items" placeholder="Search items…" showTrigger />
<AutocompletePopup>
<AutocompleteEmpty>No items found.</AutocompleteEmpty>
<AutocompleteList>
{(item: { label: string; value: string }) => (
<AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>
)}
</AutocompleteList>
</AutocompletePopup>
</Autocomplete>
<FieldDescription>Select a fruit.</FieldDescription>
</Field>
</div>
</div>
);
}