diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.css b/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.css
index d3922b321..e20e6c244 100644
--- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.css
+++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.module.css
@@ -15,3 +15,18 @@
   margin: 0;
   margin-block-start: var(--kbq-size-xxs);
 }
+
+.group {
+  display: flex;
+  gap: var(--kbq-size-s);
+}
+
+.horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
diff --git a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
index d6b9f5806..03a3843b6 100644
--- a/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
+++ b/packages/components/src/components/CheckboxGroup/CheckboxGroup.tsx
@@ -21,7 +21,6 @@ import type {
   FormFieldLabelProps,
   FormFieldProps,
 } from '../FormField';
-import { flex } from '../layout';
 
 import s from './CheckboxGroup.module.css';
 import { CheckboxGroupContext } from './CheckboxGroupContext';
@@ -37,6 +36,7 @@ export const CheckboxGroup = forwardRef<
   CheckboxGroupProps
 >((props, ref) => {
   const {
+    orientation = 'vertical',
     size = 'normal',
     label,
     style,
@@ -46,7 +46,6 @@ export const CheckboxGroup = forwardRef<
     slotProps,
     isRequired,
     labelAlign,
-    orientation,
     errorMessage,
     isLabelHidden,
     labelPlacement,
@@ -111,11 +110,7 @@ export const CheckboxGroup = forwardRef<
 
   const checkboxGroupProps = mergeProps(
     {
-      className: flex({
-        direction: orientation === 'horizontal' ? 'row' : 'column',
-        alignItems: orientation === 'horizontal' ? 'center' : 'flex-start',
-        gap: 's',
-      }),
+      className: clsx(s.group, s[orientation]),
     },
     slotProps?.checkboxGroup
   );
diff --git a/packages/components/src/components/RadioGroup/RadioGroup.module.css b/packages/components/src/components/RadioGroup/RadioGroup.module.css
index d3922b321..e20e6c244 100644
--- a/packages/components/src/components/RadioGroup/RadioGroup.module.css
+++ b/packages/components/src/components/RadioGroup/RadioGroup.module.css
@@ -15,3 +15,18 @@
   margin: 0;
   margin-block-start: var(--kbq-size-xxs);
 }
+
+.group {
+  display: flex;
+  gap: var(--kbq-size-s);
+}
+
+.horizontal {
+  flex-direction: row;
+  align-items: center;
+}
+
+.vertical {
+  flex-direction: column;
+  align-items: flex-start;
+}
diff --git a/packages/components/src/components/RadioGroup/RadioGroup.tsx b/packages/components/src/components/RadioGroup/RadioGroup.tsx
index 3dcc1e9d1..9592f5b07 100644
--- a/packages/components/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/components/src/components/RadioGroup/RadioGroup.tsx
@@ -3,7 +3,7 @@
 import { forwardRef, type ComponentRef } from 'react';
 
 import { deprecate } from '@koobiq/logger';
-import { mergeProps } from '@koobiq/react-core';
+import { clsx, mergeProps } from '@koobiq/react-core';
 import { RadioGroup as RadioGroupPrimitive } from '@koobiq/react-primitives';
 
 import { useForm } from '../Form';
@@ -14,7 +14,6 @@ import type {
   FormFieldCaptionProps,
 } from '../FormField';
 import { FormField } from '../FormField';
-import { flex } from '../layout';
 
 import { RadioGroupContext } from './index';
 import type { RadioGroupProps } from './index';
@@ -27,6 +26,7 @@ import s from './RadioGroup.module.css';
 export const RadioGroup = forwardRef<ComponentRef<'div'>, RadioGroupProps>(
   (props, ref) => {
     const {
+      orientation = 'vertical',
       size = 'normal',
       label,
       children,
@@ -35,7 +35,6 @@ export const RadioGroup = forwardRef<ComponentRef<'div'>, RadioGroupProps>(
       className,
       description,
       caption: captionProp,
-      orientation,
       isInvalid: isInvalidProp,
       isDisabled: isDisabledProp,
       isRequired: isRequiredProp,
@@ -113,11 +112,7 @@ export const RadioGroup = forwardRef<ComponentRef<'div'>, RadioGroupProps>(
 
     const radioGroupProps = mergeProps(
       {
-        className: flex({
-          direction: orientation === 'horizontal' ? 'row' : 'column',
-          alignItems: orientation === 'horizontal' ? 'center' : 'flex-start',
-          gap: 's',
-        }),
+        className: clsx(s.group, s[orientation]),
       },
       slotProps?.radioGroup
     );