From 49491bc73edb8f613b1621d769efcae812e8d278 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agn=C3=A8s=20Toulet?=
 <35176601+AgnesToulet@users.noreply.github.com>
Date: Fri, 29 Apr 2022 09:06:01 +0200
Subject: [PATCH] grafana-ui: Add checkbox value field (#48436)

* grafana-ui: Add checkbox value field

* better naming + comment
---
 packages/grafana-ui/src/components/Forms/Checkbox.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index 9fd8b8ff8c8..8cfc3c5312d 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -12,10 +12,12 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
   label?: string;
   description?: string;
   value?: boolean;
+  // htmlValue allows to specify the input "value" attribute
+  htmlValue?: string | number;
 }
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ label, description, value, onChange, disabled, className, ...inputProps }, ref) => {
+  ({ label, description, value, htmlValue, onChange, disabled, className, ...inputProps }, ref) => {
     const handleOnChange = useCallback(
       (e: React.ChangeEvent<HTMLInputElement>) => {
         if (onChange) {
@@ -34,6 +36,7 @@ export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
           checked={value}
           disabled={disabled}
           onChange={handleOnChange}
+          value={htmlValue}
           {...inputProps}
           ref={ref}
         />