BooleanField

Displays a boolean value as a check or close icon with a tooltip label.

Installation

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

Usage

import { BooleanField } from "@/components/admin";
 
<BooleanField source="is_published" />;

By default, true renders a Check icon and false renders an X icon. Hovering over the icon shows a tooltip with the value label.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	Classes applied to the icon
`defaultValue`	Optional	`unknown`	-	Fallback value when field is absent
`empty`	Optional	`ReactNode`	`null`	Rendered when value is neither boolean nor truthy (with `looseValue`)
`FalseIcon`	Optional	`LucideIcon \| null`	`X`	Icon for falsy values; `null` renders nothing
`looseValue`	Optional	`boolean`	`false`	Treat any truthy value as `true`
`record`	Optional	`object`	Record from context	Explicit record override
`TrueIcon`	Optional	`LucideIcon \| null`	`Check`	Icon for truthy values; `null` renders nothing
`valueLabelFalse`	Optional	`string`	`"false"`	Tooltip text for falsy value (supports i18n keys)
`valueLabelTrue`	Optional	`string`	`"true"`	Tooltip text for truthy value (supports i18n keys)

Custom Icons

Replace the default check/cross with any Lucide icon:

import { Heart, HeartOff } from "lucide-react";
 
<BooleanField
  source="liked"
  TrueIcon={Heart}
  FalseIcon={HeartOff}
  valueLabelTrue="Liked"
  valueLabelFalse="Not liked"
/>;

Pass null to suppress the icon for one state:

<BooleanField source="is_published" FalseIcon={null} />

Custom Labels

The valueLabelTrue and valueLabelFalse props set the tooltip text. They support i18n keys, which will be translated via the i18nProvider:

<BooleanField
  source="is_published"
  valueLabelTrue="resources.posts.fields.is_published.true"
  valueLabelFalse="resources.posts.fields.is_published.false"
/>

If no label is provided, the field falls back to ra.boolean.true / ra.boolean.false from the i18nProvider.

Loose Values

By default, the field only renders an icon when the value is strictly true or false. Set looseValue to treat any truthy/falsy value (e.g. 1, 0, "yes") as boolean:

<BooleanField source="is_active" looseValue />

Empty State

When the field value is absent or non-boolean (and looseValue is not set), empty is rendered:

<BooleanField
  source="is_published"
  empty={<span className="text-muted-foreground">—</span>}
/>