diff --git a/docs/Inputs.md b/docs/Inputs.md index 47a5c33ac6d..36bdd9ca214 100644 --- a/docs/Inputs.md +++ b/docs/Inputs.md @@ -384,6 +384,27 @@ import { NullableBooleanInput } from 'react-admin'; ![NullableBooleanInput](./img/nullable-boolean-input.png) +`` doesn't display the empty option by default. If you want to customize its label and display it, you can use the `displayNull` prop. + +```jsx +import { NullableBooleanInput } from 'react-admin'; + + +``` + +```jsx +import englishMessages from 'ra-language-english'; + +englishMessages.ra.boolean.null = 'Null label'; +``` + +![NullableBooleanInput](./img/nullable-boolean-input-null-label.png) + + `` and `` also accepts the [common input props](./Inputs.md#common-input-props). ## `` diff --git a/docs/img/nullable-boolean-input-null-label.png b/docs/img/nullable-boolean-input-null-label.png new file mode 100644 index 00000000000..6cc1c78098a Binary files /dev/null and b/docs/img/nullable-boolean-input-null-label.png differ diff --git a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx index 4866b207f0c..e5b4cc2b8a0 100644 --- a/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx +++ b/packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx @@ -40,6 +40,7 @@ const NullableBooleanInput: FunctionComponent< onChange, onFocus, options, + displayNull, parse = getBooleanFromString, resource, source, @@ -65,6 +66,21 @@ const NullableBooleanInput: FunctionComponent< source, validate, }); + + const enhancedOptions = displayNull + ? { + ...options, + SelectProps: { + displayEmpty: true, + ...(options && options.SelectProps), + }, + InputLabelProps: { + shrink: true, + ...(options && options.InputLabelProps), + }, + } + : options; + return ( {translate('ra.boolean.null')}