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}