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 = () => ( -
-
- Checkbox - - - - -
-
+export const CheckboxMixedButton = () => ( +
+ + +
+ Checkbox +
+ + + +
+
+ +
+
); +