diff --git a/src/form/input/checkbox/CheckboxInput.tsx b/src/form/input/checkbox/CheckboxInput.tsx
index bef1c3a9..f32031c0 100644
--- a/src/form/input/checkbox/CheckboxInput.tsx
+++ b/src/form/input/checkbox/CheckboxInput.tsx
@@ -15,6 +15,7 @@ export interface CheckboxInputProps {
) => void;
isSelected: boolean;
isDisabled?: boolean;
+ customIcon?: React.ReactNode;
customClassName?: string;
testid?: string;
}
@@ -25,6 +26,7 @@ function CheckboxInput({
customClassName,
isSelected,
isDisabled,
+ customIcon,
testid
}: CheckboxInputProps) {
const {
@@ -35,6 +37,7 @@ function CheckboxInput({
"checkbox-input-label--is-selected": isSelected,
"checkbox-input-label--is-disabled": isDisabled
});
+ const icon = customIcon || ;
return (
diff --git a/src/form/input/checkbox/_checkbox-input.scss b/src/form/input/checkbox/_checkbox-input.scss
index e9fac584..393e4d50 100644
--- a/src/form/input/checkbox/_checkbox-input.scss
+++ b/src/form/input/checkbox/_checkbox-input.scss
@@ -8,11 +8,9 @@
position: relative;
- display: flex;
+ display: inline-flex;
align-items: center;
- margin-bottom: 10px;
-
cursor: pointer;
user-select: none;
diff --git a/stories/2-CheckboxInput.stories.tsx b/stories/2-CheckboxInput.stories.tsx
index c0ca7a05..a92cd1e4 100644
--- a/stories/2-CheckboxInput.stories.tsx
+++ b/stories/2-CheckboxInput.stories.tsx
@@ -30,6 +30,8 @@ storiesOf("Checkbox", module).add("Checkbox", () => {
}}
/>
+
+
setState({...state, termsAndConditions: !state.termsAndConditions})
@@ -46,6 +48,8 @@ storiesOf("Checkbox", module).add("Checkbox", () => {
}}
/>
+
+
setState({...state, privacyPolicy: !state.privacyPolicy})}
isSelected={state.privacyPolicy}