diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
index 16b80a65..d7acfb85 100644
--- a/src/Input/Input.tsx
+++ b/src/Input/Input.tsx
@@ -204,6 +204,8 @@ export const Input = ({
const inputPassword = extraAttributes.type === 'password';
+ const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked')
+
// Styling
const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
className,
@@ -273,6 +275,21 @@ export const Input = ({
);
}
+ if (indeterminateCheckboxInput) {
+ return (
+
+
+
+ );
+ }
+
if (inputPassword) {
return (
diff --git a/stories/Form/Checkbox.stories.mdx b/stories/Form/Checkbox.stories.mdx
index b42f7531..44d790b8 100644
--- a/stories/Form/Checkbox.stories.mdx
+++ b/stories/Form/Checkbox.stories.mdx
@@ -40,5 +40,5 @@ Per poter raggruppare gli elementi checkbox occorrerà aggiungere al componente
Per ottenere uno stato di tipo Mixed basterà aggiungere la classe `.semi-checked` al componente Input.
diff --git a/stories/Form/Checkbox.stories.tsx b/stories/Form/Checkbox.stories.tsx
index 862fd685..5eac95da 100644
--- a/stories/Form/Checkbox.stories.tsx
+++ b/stories/Form/Checkbox.stories.tsx
@@ -139,16 +139,26 @@ export const CheckboxGruppi = () => (
);
-export const CheckboxMixed = () => (
-
+export const CheckboxMixedButton = () => (
+
+
+
+
+
+
+
);
+