NullableBooleanInput

Dropdown select input for editing a boolean value that can also be null.

Installation

pnpm dlx shadcn@latest add @shadmin/nullable-boolean-input

Usage

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

The select shows three options: a blank value (mapped to null), "Yes" (mapped to true), and "No" (mapped to false). The labels can be customized via the nullLabel, trueLabel, and falseLabel props.

The expected value for the form state is null, true, or false.

Props

Prop	Required	Type	Default	Description
`source`	Required	`string`	-	Field name
`className`	Optional	`string`	-	Wrapper classes
`defaultValue`	Optional	`boolean` \| `null`	-	Initial value
`disabled`	Optional	`boolean`	-	Disable input
`falseLabel`	Optional	`string`	`ra.boolean.false`	Translation key (or literal) for the false option
`format`	Optional	`function`	-	Callback to convert the value from the form state into the string used by the select.
`helperText`	Optional	`ReactNode`	-	Help text
`label`	Optional	`string` \| `false`	Inferred	Custom / hide label
`nullLabel`	Optional	`string`	`ra.boolean.null`	Translation key (or literal) for the null option
`parse`	Optional	`function`	-	Callback to convert the string selection back into the boolean (or null) stored in the form state.
`trueLabel`	Optional	`string`	`ra.boolean.true`	Translation key (or literal) for the true option
`validate`	Optional	`Validator` \| `Validator[]`	-	Validation

`nullLabel`, `trueLabel`, `falseLabel`

Use these props to customize each option label. Values are first looked up in your i18n translations, then used as a literal if no translation key matches.

<NullableBooleanInput
  source="is_published"
  nullLabel="Not specified"
  trueLabel="Published"
  falseLabel="Draft"
/>

`format` / `parse`

By default, <NullableBooleanInput> converts the form value to/from a string for the underlying <Select>. You can override the conversion with custom format and parse callbacks, for example if you store the value as 0, 1, or -1:

<NullableBooleanInput
  source="is_published"
  format={(v) => (v === 1 ? "true" : v === 0 ? "false" : "")}
  parse={(v) => (v === "true" ? 1 : v === "false" ? 0 : null)}
/>

Alternatives

If the field can only be true or false, use <BooleanInput> for a toggle switch.