ChipField

Displays a value inside a styled shadcn <Badge>, similar to a Material UI Chip. Useful for tags, statuses, or short categorical labels.

Installation

pnpm dlx shadcn@latest add @shadmin/chip-field

Usage

import { ChipField } from "@/components/admin";
 
<ChipField source="category" />;

You can change the badge style via the variant prop:

<ChipField source="status" variant="secondary" />

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`record`	Optional	`object`	Record from context	Explicit record
`defaultValue`	Optional	`any`	-	Fallback value
`empty`	Optional	`ReactNode`	-	Placeholder when value is null or empty
`variant`	Optional	`"default" \| "outline" \| "secondary" \| "destructive"`	`"outline"`	Badge style
`className`	Optional	`string`	-	Additional CSS classes

Remaining props are forwarded to the underlying <Badge> component.

The name of the field on the record. The value is read with useFieldValue.

<ChipField source="status" />

Rendered when the field value is null, undefined, or an empty string. Strings are passed through the translator.

<ChipField source="status" empty="No status" />

Switches the visual style of the underlying shadcn <Badge>. Defaults to "outline".

<ChipField source="status" variant="secondary" />