diff --git a/src/5_shared/assets/icons/actions/tick.svg b/src/5_shared/assets/icons/actions/tick.svg
index cea3353..a2fcc91 100644
--- a/src/5_shared/assets/icons/actions/tick.svg
+++ b/src/5_shared/assets/icons/actions/tick.svg
@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="#272932"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.3581 5.65107C21.5508 5.84885 21.5467 6.16541 21.3489 6.35812L9.03314 18.3581C8.83898 18.5473 8.52944 18.5473 8.33528 18.3581L2.65107 12.8197C2.45329 12.6269 2.44918 12.3104 2.64189 12.1126C2.8346 11.9148 3.15115 11.9107 3.34893 12.1034L8.68421 17.3019L20.6511 5.64189C20.8488 5.44918 21.1654 5.45329 21.3581 5.65107Z" fill="currentColor"/>
 </svg>
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
new file mode 100644
index 0000000..f7a6ee4
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.module.scss
@@ -0,0 +1,71 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.checkbox {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 6px;
+	color: rgb(255, 255, 255, 0);
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 1px solid $danger-bright-color;
+	}
+}
+
+label:hover .icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+	color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-text-light-color;
+	color: $neutral-text-light-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
new file mode 100644
index 0000000..d816df8
--- /dev/null
+++ b/src/5_shared/ui/CustomCheckbox/CustomCheckbox.tsx
@@ -0,0 +1,71 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import SvgIconTick from '@assets/icons/actions/tick.svg?react';
+
+import styles from './CustomCheckbox.module.scss';
+
+interface CustomCheckboxProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+	children?: JSX.Element | string;
+}
+
+export const CustomCheckbox = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+	children,
+}: CustomCheckboxProps) => {
+	return (
+		<label
+			className={cx(styles.checkbox, labelClassName, {
+				[styles['checkbox--right']]: isPositionRight,
+			})}
+		>
+			<input
+				type="checkbox"
+				value={value}
+				name={name}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{children}</span>
+					<span
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
+					>
+						<SvgIconTick />
+					</span>
+				</>
+			) : (
+				<>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}>
+						<SvgIconTick />
+					</span>
+					<span className={styles.label}>{children}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.module.scss b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
new file mode 100644
index 0000000..0f2dfc6
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.module.scss
@@ -0,0 +1,85 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.radio {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	display: flex;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 24px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-background-main-color;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 50%;
+
+	&--right {
+		margin-right: 0;
+	}
+
+	&--error {
+		border: 1px solid $danger-bright-color;
+	}
+}
+
+label:hover .icon {
+	border-color: $primary-background-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+}
+
+input:checked ~ .icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-background-second-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-background-main-color;
+	border: 1px solid $neutral-text-light-color;
+}
+
+input:checked:disabled ~ .icon::before {
+	content: '';
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+	background-color: $neutral-text-light-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomRadio/CustomRadio.tsx b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
new file mode 100644
index 0000000..12ab1a7
--- /dev/null
+++ b/src/5_shared/ui/CustomRadio/CustomRadio.tsx
@@ -0,0 +1,63 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomRadio.module.scss';
+
+interface CustomRadioProps {
+	name: string;
+	value: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+	isError?: boolean;
+}
+
+export const CustomRadio = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+	isError,
+}: CustomRadioProps) => {
+	return (
+		<label
+			className={cx(styles.radio, labelClassName, { [styles['radio--right']]: isPositionRight })}
+		>
+			<input
+				type="radio"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{labelText}</span>
+					<span
+						className={cx(styles.icon, styles['icon--right'], { [styles['icon--error']]: isError })}
+					></span>
+				</>
+			) : (
+				<>
+					<span className={cx(styles.icon, { [styles['icon--error']]: isError })}></span>
+					<span className={styles.label}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.module.scss b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
new file mode 100644
index 0000000..02dc4ac
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.module.scss
@@ -0,0 +1,105 @@
+@import '@styles/colors.scss';
+
+.visuallyHidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	margin: -1px;
+	padding: 0;
+	border: 0;
+	clip: rect(0 0 0 0);
+	overflow: hidden;
+}
+
+.toggle {
+	position: relative;
+	display: flex;
+	align-items: center;
+	padding: 0;
+	cursor: pointer;
+
+	&--right {
+		justify-content: space-between;
+	}
+}
+
+.icon {
+	position: relative;
+	margin-right: 10px;
+	justify-content: center;
+	align-items: center;
+	width: 48px;
+	height: 24px;
+	box-sizing: border-box;
+	background-color: $neutral-text-light-color;
+	border: 1px solid $neutral-text-light-color;
+	border-radius: 12px;
+
+	&--right {
+		margin-right: 0;
+	}
+}
+
+.icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked ~ .icon {
+	background-color: $primary-button-active-color;
+	border: 1px solid $primary-button-active-color;
+}
+
+input:checked ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:disabled ~ .icon {
+	background-color: $neutral-line-color;
+	border: 1px solid $neutral-line-color;
+}
+
+input:disabled ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 3px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+input:checked:disabled ~ .icon {
+	background-color: $neutral-line-color;
+	border: 1px solid$neutral-line-color;
+}
+
+input:checked:disabled ~ .icon::before {
+	content: '';
+	position: absolute;
+	top: 3px;
+	left: 26px;
+	width: 16px;
+	height: 16px;
+	border-radius: 50%;
+	background-color: $neutral-background-main-color;
+}
+
+.label {
+	font-size: 14px;
+	line-height: 16px;
+}
diff --git a/src/5_shared/ui/CustomToggle/CustomToggle.tsx b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
new file mode 100644
index 0000000..724028d
--- /dev/null
+++ b/src/5_shared/ui/CustomToggle/CustomToggle.tsx
@@ -0,0 +1,59 @@
+import cx from 'classnames';
+import { ChangeEvent } from 'react';
+
+import styles from './CustomToggle.module.scss';
+
+interface CustomToggleProps {
+	name: string;
+	value?: string;
+	id?: string;
+	onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+	inputClassName?: string;
+	labelClassName?: string;
+	labelText?: string;
+	isDisabled?: boolean;
+	isChecked?: boolean;
+	isPositionRight?: boolean;
+}
+
+export const CustomToggle = ({
+	name,
+	value,
+	id,
+	onChange,
+	inputClassName,
+	labelClassName,
+	labelText,
+	isDisabled,
+	isChecked,
+	isPositionRight,
+}: CustomToggleProps) => {
+	return (
+		<label
+			className={cx(styles.toggle, labelClassName, { [styles['toggle--right']]: isPositionRight })}
+		>
+			<input
+				type="checkbox"
+				name={name}
+				value={value}
+				id={id}
+				className={cx(styles.visuallyHidden, inputClassName)}
+				onChange={onChange}
+				disabled={isDisabled}
+				checked={isChecked}
+			/>
+
+			{isPositionRight ? (
+				<>
+					<span className={styles.label}>{labelText}</span>
+					<span className={cx(styles.icon, styles['icon--right'])}></span>
+				</>
+			) : (
+				<>
+					<span className={styles.icon}></span>
+					<span className={styles.label}>{labelText}</span>
+				</>
+			)}
+		</label>
+	);
+};